<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no,minimal-ui">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="address=no">
<meta charset="UTF-8">
<title>Coo脚本集合</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="coo.js"></script>
<link type="text/css" href="../css/datepicker.css" rel="stylesheet">
<link type="text/css" href="../css/tabs.css" rel="stylesheet">
<link type="text/css" href="../css/alertUI.css" rel="stylesheet">
<link type="text/css" href="../css/lightbox/lightbox.css" rel="stylesheet">
<style>
html{overflow:auto; overflow-y:scroll;}
body{background:#f5f5f5; font-size:14px; line-height:26px; margin:0; padding:0; color:#333; font-family:"Microsoft YaHei",Arial;}
body::-webkit-scrollbar{width:5px; height:5px;}
body::-webkit-scrollbar-track{background:#f5f5f5;}
body::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px rgba(0,0,0,0.3); background:rgba(0,0,0,0.1);}
body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.2);}
body::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.3);}
input, select, select option, textarea{font-family:"Microsoft YaHei",Arial; outline:none; resize:none;}
input, textarea, select, a, label, b, span, strong, li, div, p, h1, h2{-webkit-tap-highlight-color:rgba(255,0,0,0);}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button{padding:1px 7px; min-height:26px;}
img{border:none;}
ul, li, p{list-style:none; margin:0; padding:0;}
h2, h3{text-shadow:1px 1px 0 #fff;}
a, a:hover{color:#39C; text-decoration:underline;}
a:hover{text-decoration:none;}
.blank{clear:both; overflow:hidden; width:auto; height:10px; font-size:0;}
.clear{height:0; font-size:0; clear:both; overflow:hidden;}
#main{margin:20px auto; width:930px; margin-top:15px;}
.content{background-color:#FFF; border:1px dotted #ddd; padding:10px; margin-bottom:8px; color:#666; border-radius:5px; -webkit-border-radius:5px;}
.content pre{font-family:"Microsoft YaHei",Arial; margin-left:-28px;}
.inlist{float:left; width:225px; height:auto; overflow:hidden;}
select, .input input, .input textarea{height:24px; line-height:23px; padding:0 0 0 3px; border:1px solid #bbb; background-color:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.1); vertical-align:middle; font-family:"Microsoft YaHei",Arial; -moz-transition:all 300ms ease-out; -webkit-transition:all 300ms ease-out; -o-transition:all 300ms ease-out; transition:all 300ms ease-out;}
select:focus, .input input:focus, .input textarea:focus{border-color:#1E7BDB;}
.input input, .input textarea{width:300px; *margin-top:3px;}
.input textarea{line-height:20px;}
.colr{display:inline-block; *display:inline; *zoom:1; width:20px; height:20px; overflow:hidden; margin-left:10px; margin-bottom:-3px; cursor:pointer; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -moz-box-shadow:0 0 5px #444; -webkit-box-shadow:0 0 5px #444; box-shadow:0 0 5px #444;}
input.reg{border:1px solid #e60000; background:#FFE8E8;}
.uploadbtn{padding:0; margin:0; margin-bottom:-5px;}
.agree{color:#F90; margin-left:5px;}
.note{color:#960000;}
.tip{color:#f1aa01; margin-left:5px;}
.error{color:#f00; margin-left:5px; text-shadow:1px 1px 0 #eee; line-height:26px;}
.success{color:#50a40f; margin-left:5px;}
.dropbox{width:230px; height:100px; line-height:100px; overflow:hidden; text-align:center; border:5px dashed #ccc; margin:10px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.fixed, .fixed:link, .fixed:visited, .fixed:hover{display:block; width:27px; height:70px; line-height:16px; overflow:hidden; padding-left:3px; padding-top:7px; text-align:center; text-decoration:none; position:absolute; z-index:667; top:500px; right:10px; background:#ffc740; font-size:12px; color:#fff; letter-spacing:4px; border:1px solid #ccc; text-shadow:1px 1px 0 #d29502; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; box-shadow:1px 1px 3px #ccc;}
.fixed:hover{background:#febc1e;}
input[type="submit"], input[type="reset"], .bbtn{border:1px solid #135aa4; color:#fff; font:12px/22px "Microsoft YaHei",Arial; width:auto; height:25px; *line-height:18px; *height:23px; padding:0 10px; cursor:pointer; overflow:visible; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; box-shadow:1px 1px 2px #b7d4f1; text-shadow:0 -1px 0 #135aa4; vertical-align:middle; background:#1f7cdc;
background:-moz-linear-gradient(top, #1f7cdc 0%, #1666b8 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f7cdc), color-stop(100%,#1666b8));
background:-webkit-linear-gradient(top, #1f7cdc 0%, #1666b8 100%);
background:-o-linear-gradient(top, #1f7cdc 0%, #1666b8 100%);
background:-ms-linear-gradient(top, #1f7cdc 0%, #1666b8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1f7cdc, endColorstr=#1666b8, gradientType=0);
background:linear-gradient(top, #1f7cdc 0%, #1666b8 100%);}
input[type="submit"]:hover, input[type="reset"]:hover, .bbtn:hover{border-color:#135aa4; color:#fff; background:#196dc4;
background:-moz-linear-gradient(top, #196dc4 0%, #135aa5 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#196dc4), color-stop(100%,#135aa5));
background:-webkit-linear-gradient(top, #196dc4 0%, #135aa5 100%);
background:-o-linear-gradient(top, #196dc4 0%, #135aa5 100%);
background:-ms-linear-gradient(top, #196dc4 0%, #135aa5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#196dc4, endColorstr=#135aa5, gradientType=0);
background:linear-gradient(top, #196dc4 0%, #135aa5 100%);}
input[type="submit"]:active, input[type="reset"]:active, .bbtn:active{box-shadow:inset 0 0 8px 2px #0a4686;}
input.ybtn{border:1px solid #d4b06a; color:#753d00; font:12px/22px "Microsoft YaHei",Arial; width:auto; height:25px; *line-height:18px; *height:23px; padding:0 10px; cursor:pointer; overflow:visible; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; box-shadow:1px 1px 2px #fff4ae; text-shadow:0 1px 0 #fff4ae; vertical-align:middle; background:#ffd423;
background:-moz-linear-gradient(top, #fff7bd 0%, #ffd423 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff7bd), color-stop(100%,#ffd423));
background:-webkit-linear-gradient(top, #fff7bd 0%, #ffd423 100%);
background:-o-linear-gradient(top, #fff7bd 0%, #ffd423 100%);
background:-ms-linear-gradient(top, #fff7bd 0%, #ffd423 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff7bd, endColorstr=#ffd423, gradientType=0);
background:linear-gradient(top, #fff7bd 0%, #ffd423 100%);}
input.ybtn:hover, input.ybtn.hover{border-color:#c29246; color:#753d00; background:#ffc213;
background:-moz-linear-gradient(top, #fff4a3 0%, #ffc213 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff4a3), color-stop(100%,#ffc213));
background:-webkit-linear-gradient(top, #fff4a3 0%, #ffc213 100%);
background:-o-linear-gradient(top, #fff4a3 0%, #ffc213 100%);
background:-ms-linear-gradient(top, #fff4a3 0%, #ffc213 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff4a3, endColorstr=#ffc213, gradientType=0);
background:linear-gradient(top, #fff4a3 0%, #ffc213 100%);}
input.ybtn:active{box-shadow:inset 0 0 8px 2px #ffc213;}
input.disabled, input.disabled:hover{border-color:#bbb; color:#999; background:#d9d9d9; text-shadow:0 1px 0 #fff; box-shadow:1px 1px 2px #eee; cursor:no-drop;}
/* 提示框 */
.load-overlay{position:fixed; left:0; top:0; z-index:9998; width:100%; height:100%; background:rgba(0,0,0,0.4); overflow:hidden; text-align:center; opacity:0; -webkit-transition:all 200ms ease-out; transition:all 200ms ease-out;}
.load-overlay-in{opacity:1;}
.load-view{position:fixed; top:50%; left:50%; z-index:9999; margin-left:-60px; margin-top:-60px; min-width:120px; max-width:260px; min-height:120px; overflow:hidden; background:rgba(0,0,0,0.6); border-radius:10px; opacity:0; transform:scale(1.185); -webkit-transform:scale(1.185); transition:opacity 200ms ease-out,transform 200ms ease-out; -webkit-transition:opacity 200ms ease-out,-webkit-transform 200ms ease-out;}
.load-view-in{-webkit-transform:scale(1); transform:scale(1); opacity:1;}
.load-view-out{-webkit-transform:scale(0.815); transform:scale(0.815); opacity:0;}
.load-view div{display:block; width:32px; height:32px; margin:0 auto; margin-top:27px; background:no-repeat center center; background-size:cover;}
.load-view span{display:block; color:#fff; line-height:18px; font-size:14px; padding:10px; text-align:center;}
.load-view span.text{font-size:14px;}
/* 提示框.加载动画 */
.load-view .load-animate, .load-view .load-success, .load-view .load-error, .preloader{display:block; width:35px; height:35px; animation:preloader-spin 1s steps(12, end) infinite; -webkit-animation:preloader-spin 1s steps(12, end) infinite; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.load-view .load-animate-gray, .preloader-gray{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
@-webkit-keyframes preloader-spin{100%{-webkit-transform:rotate(360deg);}}
@keyframes preloader-spin{100%{transform:rotate(360deg);}}
/* 提示框.成功,错误图标 */
.load-view .load-success{animation:none; -webkit-animation:none; background-image:url("");}
.load-view .load-error{animation:none; -webkit-animation:none; background-image:url("");}
.nav{width:100%; height:auto;}
.nav > span{display:block; position:fixed; top:0; left:0; z-index:777; width:100%; height:auto; background:rgba(255,255,255,0.98); box-shadow:0 0 10px rgba(0,0,0,0.4);}
.nav span > div{width:100%; height:100%; position:relative; text-align:left; cursor:pointer;}
.nav span > div div{position:absolute; top:50%; left:50%; width:160px; height:48px; line-height:48px; margin-left:-80px; margin-top:-24px; font-size:36px; color:#f5f5f5; text-align:center; font-weight:500;}
.nav span ul{position:absolute; top:0; left:0; z-index:1; width:100%; height:auto; overflow:hidden; padding:10px 0;}
.nav span ul li{float:left; height:auto; position:relative;}
.nav span ul li a, .nav ul li a:hover{padding:0 10px; font-size:12px; display:block; line-height:25px; height:25px; text-decoration:none; transition:color 300ms ease-out; -webkit-transition:color 300ms ease-out;}
.nav span ul li a:hover{color:#ffc740;}
#menustate{display:none;}
.nav .menu-label{float:left; display:none; position:relative; width:48px; height:48px; cursor:pointer; -webkit-transition:opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition:opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-tap-highlight-color:transparent;}
.nav .menu-label:hover, .nav .menu-label:focus, .nav .menu-label:active{opacity:0.65;}
#menustate:checked ~ .nav .menu-label{-webkit-transform:rotate(90deg); transform:rotate(90deg);}
.nav .menuico{position:absolute; z-index:3; top:0; left:0; width:48px; height:48px; -webkit-transition:opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition:opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);}
.nav .menuico-top{z-index:4; -webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition:transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.nav .menuico-bottom{-webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition:transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
#menustate:checked ~ .nav .menuico-top{-webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
#menustate:checked ~ .nav .menuico-bottom{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.nav .menuico span{display:block; width:17px; height:1px; background:#333; position:absolute; left:16px; z-index:1; -webkit-transition:-webkit-transform 0.2s; transition:transform 0.2s;}
.nav .menuico .top{top:23px; -webkit-transform:translateY(-3px); transform:translateY(-3px); -webkit-transition:-webkit-transform 0.2s 0.2s; transition:transform 0.2s 0.2s;}
.nav .menuico .bottom{bottom:23px; -webkit-transform:translateY(3px); transform:translateY(3px);}
#menustate:checked ~ .nav .menuico .top{-webkit-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:0; transition-delay:0;}
#menustate:checked ~ .nav .menuico .bottom{-webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:-webkit-transform 0.2s; transition:transform 0.2s;}
@media only screen and (max-width:600px) {
body{font-size:12px;}
h2, h3{font-size:14px; margin:10px 0;}
#main{width:94%; height:auto; overflow:hidden;}
.input input, .input textarea{width:65%;}
input[type="submit"], input[type="reset"], .bbtn, input.ybtn{width:auto;}
.nav, .nav span > div{height:48px;}
.nav span > div{position:relative;}
.nav .menu-label{display:block;}
.nav span > div div{position:static; float:left; width:auto; margin:0; font-size:14px; color:#39C; text-align:left; font-weight:normal;}
.nav span ul{display:none; padding:0; margin-top:48px; height:0; overflow:auto; background:#fff; -webkit-overflow-scrolling:touch; transition:height 300ms ease-out; -webkit-transition:height 300ms ease-out;}
.nav span ul.this{display:block;}
.nav span ul li{width:100%; position:relative;}
.nav span > div:after, .nav span ul li:after{content:""; display:block; position:absolute; left:0; bottom:0; overflow:hidden; background:#eaeaea; width:100%; height:1px; -webkit-transform:scaleY(0.5); transform:scaleY(0.5); -webkit-transform-origin:bottom; transform-origin:bottom;}
.nav span ul li a, .nav ul li a:hover{height:35px; line-height:35px;}
.weekarea{width:100%;}
.slidearea{width:100%; margin:0;}
.slide{width:100%;}
.slidecontroller{width:100%;}
.pCon{width:100%;}
.dragshow{width:100%;}
.inertiaarea{width:100%;}
.baidumap{width:100%;}
}
</style>
</head>

<body>
<input type="checkbox" id="menustate" />
<div class="nav">
	<span>
		<div>
			<label class="menu-label" for="menustate">
				<span class="menuico menuico-top">
					<span class="top"></span>
				</span>
				<span class="menuico menuico-bottom">
					<span class="bottom"></span>
				</span>
			</label>
			<div>快速导航</div>
		</div>
		<ul>
			<li><a href="javascript:void(0)" anchor="tagarea">验证标签</a></li>
			<li><a href="javascript:void(0)" anchor="uploadarea">上传控件</a></li>
			<li><a href="javascript:void(0)" anchor="tabsarea">选项卡</a></li>
			<li><a href="javascript:void(0)" anchor="diyarea">自定义验证标识前缀</a></li>
			<li><a href="javascript:void(0)" anchor="functionarea">回调函数, 使用函数类型</a></li>
			<li><a href="javascript:void(0)" anchor="objarea">回调函数, 使用对象字面量类型</a></li>
			<li><a href="javascript:void(0)" anchor="extendarea">扩展验证标签</a></li>
			<li><a href="javascript:void(0)" anchor="autosavearea">自动保存表单</a></li>
			<li><a href="javascript:void(0)" anchor="directarea">控件直接验证</a></li>
			<li><a href="javascript:void(0)" anchor="noformarea">非表单验证</a></li>
			<li><a href="javascript:void(0)" anchor="colorarea">颜色选择器</a></li>
			<li><a href="javascript:void(0)" anchor="datearea">日期选择器</a></li>
			<li><a href="javascript:void(0)" anchor="weekarea">周选择器</a></li>
			<li><a href="javascript:void(0)" anchor="getfieldsarea">获取所有控件值</a></li>
			<li><a href="javascript:void(0)" anchor="html5area">HTML5 拖拽上传</a></li>
			<li><a href="javascript:void(0)" anchor="showmenuarea">显示菜单</a></li>
			<li><a href="javascript:void(0)" anchor="interlacearea">鼠标经过且隔行变色</a></li>
			<li><a href="javascript:void(0)" anchor="overlayarea">遮罩层与展示层</a></li>
			<li><a href="javascript:void(0)" anchor="lightboxarea">图片展示</a></li>
			<li><a href="javascript:void(0)" anchor="alertuiarea">提示窗</a></li>
			<li><a href="javascript:void(0)" anchor="touchmovearea">分页滚动</a></li>
			<li><a href="javascript:void(0)" anchor="pullrefresharea">下拉刷新</a></li>
			<li><a href="javascript:void(0)" anchor="showtitlearea">动画显示标题</a></li>
			<li><a href="javascript:void(0)" anchor="dragshowarea">拖动显示</a></li>
			<li><a href="javascript:void(0)" anchor="inertiaarea">惯性拖拽</a></li>
			<li><a href="javascript:void(0)" anchor="inertiabaidumap">百度地图</a></li>
			<div class="clear"></div>
		</ul>
	</span>
</div>
<script>
function resize(){
	var window = $.window();
	if(window.width<=600){
		$('.nav span ul').data('height', window.height-$('.nav span > div').height());
		$('.nav, .nav span > div').removeAttr('style');
	}else{
		$('.nav ul').removeAttr('style');
		$('.nav, .nav span > div').height($('.nav ul').outerHeight(false));
	}
}
$(window).resize(resize);
$(function(){
	resize();
	$('.nav span > div').click(function(){
		if($.window().width<=600){
			var ul = $('.nav span ul');
			if(!ul.hasClass('this')){
				ul.addClass('this').height(ul.data('height'));
				$('html').css('overflow', 'hidden');
			}else{
				ul.removeAttr('style');
				setTimeout(function(){ul.removeClass('this')}, 300);
				$('html').removeAttr('style');
			}
		}
	});
	$('.nav li a').click(function(){
		$.scrollto('#'+$(this).attr('anchor'));
		$('#menustate').removeProp('checked');
		$('.nav span > div').simclick();
	});
	$('h2').click(function(){
		$.overload('请稍候');
		setTimeout(function(){
			$.overload('现在正在进入中哦，请再继续稍候', null);
			setTimeout(function(){
				$.overloadSuccess('完成了');
				setTimeout(function(){
					$.overload('继续读取');
					setTimeout(function(){
						$.overloadError('现在错误了');
					}, 3000);
				}, 2000);
			}, 3000);
		}, 3000);
	});
});
</script>

<div id="main">
	<a id="headertop"></a>
	<h2>验证插件使用说明</h2>

	<div class="content">
		1.页面中引入jquery.js库(版本1.4.4~1.11.3)与coo.js<br />
		<br />2.加入如下代码<pre>
	$(function(){$(form表单).coo()});</pre>
		<br />3.验证标签对象使用类名class属性，验证标签以"-"符号分隔，第一位标识使用coo。例如：class="coo-need-email"：必填字段，且只能输入邮箱，class="coo-date-need"：输入框自动加载日期控件，且必须日期格式，且为必填字段，也可写成class="myClass coo-need-email"或class="myClass coo-date-need"，即可使用多个类名，其实need标签已可忽略，因为email、date这些验证标签已包含不能为空的效果，验证顺序按验证标签顺序执行，还有一种是扩展需验证的expr，可不需使用coo前缀标识类名的格式，更多验证标签与详细教程请参考下面的说明<br />
		<br />4.自定义验证规则，使用reg自定义属性，例如：class="coo-reg" reg="^\d{4}$"，验证不通过时提示：“格式错误”<br />
		<br />5.使用css自定义属性，自定义被验证对象的验证不通过样式，验证不通过时被验证对象将添加该样式，通过时自动去除<br />
		<br />6.验证提示的位置，使用pos自定义属性，值有top、bottom、left、right、end、parent、(num num)、absleft、absright、expr，end：在被验证对象的父元素的内部最后，parent：被验证对象的父元素后面，num：数字(漂浮，可负数，分别对应以被验证对象左上角为0开始的left、top)，[absleft|absright]：漂浮在被验证对象的左/右侧，expr：css选择器(当不是之前所有的值时即当作css选择器执行，获取被验证对象之后的expr对象，然后提示将显示在该对象的前面)，不设置该自定义属性或为空或right即默认在被验证对象的后面(被验证对象为checkbox或radio时为end)<br />
		<br />7.自定义提示，把需要提示的信息，使用tip自定义属性即显示提示tip的信息(只支持文本框、文本区域)，使用success自定义属性即在验证通过时显示出来，使用error自定义属性即在验证不通过时提示error的信息。例如：class="coo-need" error="干嘛不输入呢？"，验证不通过时将会提示："干嘛不输入呢？"，而不是默认的"此项不可为空"，每种自定义信息都可以设定各自的css与area，例如errorcss、errorarea，使用errorarea自定义属性时pos将会无效，errorarea的值为存放验证失败提示的容器的expr，class="coo-need-num" 可使用自定义属性 need-error="必填" num-error="必须数字" 设定各个验证标签的提示信息(增加对应的前缀)(包括可设定各自的errorcss、errorarea)，若不存在指定的自定义属性即默认使用没有前缀的error<br />
		<br />8.修改提示样式，在&lt;style&gt;中给label.error定义样式规则即可，或使用errorcss自定义属性指定一个class样式名称(tip、success与error一样规则)
	</div>


	<a id="tagarea"></a>
	<form action="#" class="checkform" method="post" onSubmit="return doSubmit()" target="_blank">
	<div class="input">
	<h2>验证标签</h2>
	<h3>need：不能为空 <span class="note">(fn:验证通过后执行)</span></h3>
	<div class="content">举例：&lt;input type="text" id="need" fn="function(o){$('#fn').html($(o).val())}" class="coo-need" pos="0 0" /&gt; &lt;span id="fn"&gt;&lt;/span&gt;
		<br />实例：<input type="text" id="need" class="coo-need" fn="function(o){$('#fn').html($(o).val())}" pos="0 0" /> <span id="fn"></span>
	</div>

	<h3>username：用户名</h3>
	<div class="content">举例：&lt;input type="text" name="username" id="username" errorarea="#errorarea" class="coo-username" /&gt;
		<br />实例：<input type="text" name="username" id="username" errorarea="#errorarea" class="coo-username" /> <span id="errorarea">请输入用户名</span>
	</div>

	<h3>usernamecn：用户名 <span class="note">(验证对象的值可包含中文)</span></h3>
	<div class="content">举例：&lt;input type="text" name="usernamecn" id="usernamecn" class="coo-usernamecn" /&gt;
		<br />实例：<input type="text" name="usernamecn" id="usernamecn" class="coo-usernamecn" />
	</div>

	<h3>password：密码</h3>
	<div class="content">举例：&lt;input type="text" name="password" class="coo-password" /&gt;
		<br />实例：<input type="text" name="password" class="coo-password" />
	</div>

	<h3>num：数字 <span class="note">(验证对象的值可负数)(必须整数)</span></h3>
	<div class="content">举例：&lt;input type="text" name="num" need-error="必填" num-error="自定：必须数字" success="格式正确" class="coo-need-num" /&gt;
		<br />实例：<input type="text" name="num" need-error="必填" num-error="自定：必须数字" success="格式正确" pos="absright" class="coo-need-num" />
	</div>

	<h3>float<span class="note">n</span>：浮点数字 <span class="note">(验证对象的值可负数)(n:不存在即默认最多两位小数, 否则最多n位小数)</span></h3>
	<div class="content">举例：&lt;input type="text" name="float" class="coo-float" /&gt;&lt;input type="text" name="float4" class="coo-float4" /&gt;
		<br />实例：<input type="text" name="float" class="coo-float" />
		<br />　　　<input type="text" name="float4" class="coo-float4" />
	</div>

	<h3>char：字母</h3>
	<div class="content">举例：&lt;input type="text" name="char" tip="请在这里输入英文字母" success="格式正确" class="coo-char" /&gt;
		<br />实例：<input type="text" name="char" tip="请在这里输入英文字母" success="格式正确" class="coo-char" />
	</div>

	<h3>en：字母、数字和下划线</h3>
	<div class="content">举例：&lt;input type="text" name="en" class="char coo-en t-c coo" /&gt;
		<br />实例：<input type="text" name="en" class="char coo-en t-c coo" />
	</div>

	<h3>cn：中文 <span class="note">(验证对象的值不包括中文符号)</span></h3>
	<div class="content">举例：&lt;input type="text" name="cn" class="coo-cn" /&gt;
		<br />实例：<input type="text" name="cn" class="coo-cn" />
	</div>

	<h3>double：中文、全角字符 <span class="note">(验证对象的值包括中文符号)</span></h3>
	<div class="content">举例：&lt;input type="text" name="double" class="coo-double" /&gt;
		<br />实例：<input type="text" name="double" class="coo-double" />
	</div>

	<h3>money：金额 <span class="note">(验证对象的值只能正数, 且最多两位小数)</span></h3>
	<div class="content">举例：&lt;input type="text" name="money" class="coo-money" /&gt;
		<br />实例：<input type="text" name="money" class="coo-money" />
	</div>

	<h3>idcard：身份证号 <span class="note">(兼容15位与18位且最后为X)</span></h3>
	<div class="content">举例：&lt;input type="text" name="idcard" class="coo-idcard" /&gt;
		<br />实例：<input type="text" name="idcard" class="coo-idcard" />
	</div>

	<h3>zip：邮编</h3>
	<div class="content">举例：&lt;input type="text" name="zip" class="coo-zip" /&gt;
		<br />实例：<input type="text" name="zip" class="coo-zip" />
	</div>

	<h3>tel：固话号码</h3>
	<div class="content">举例：&lt;input type="text" name="tel" class="coo-tel" /&gt;
		<br />实例：<input type="text" name="tel" class="coo-tel" />
	</div>

	<h3>actel：固话号码 <span class="note">(验证对象的值必须包括区号)</span></h3>
	<div class="content">举例：&lt;input type="actext" name="tel" class="coo-actel" /&gt;
		<br />实例：<input type="text" name="actel" class="coo-actel" />
	</div>

	<h3>mobile：手机号码</h3>
	<div class="content">举例：&lt;input type="text" name="mobile" class="coo-mobile" /&gt;
		<br />实例：<input type="text" name="mobile" class="coo-mobile" />
	</div>

	<h3>phone：联系电话 <span class="note">(验证对象的值包括手机与固话)</span></h3>
	<div class="content">举例：&lt;input type="text" name="phone" class="coo-phone" /&gt;
		<br />实例：<input type="text" name="phone" class="coo-phone" />
	</div>

	<h3>acphone：联系电话 <span class="note">(验证对象的值包括手机与固话)(固话必须包括区号)</span></h3>
	<div class="content">举例：&lt;input type="text" name="acphone" class="coo-acphone" /&gt;
		<br />实例：<input type="text" name="acphone" class="coo-acphone" />
	</div>

	<h3>email：邮件地址</h3>
	<div class="content">举例：&lt;input type="text" name="email" class="coo-email" /&gt;
		<br />实例：<input type="text" name="email" class="coo-email" />
	</div>

	<h3>url：网址 <span class="note">(验证对象的值可不包含前缀, 或者http、https、ftp)</span></h3>
	<div class="content">举例：&lt;input type="text" name="url" class="coo-url" /&gt;
		<br />实例：<input type="text" name="url" class="coo-url" />
	</div>

	<h3>qq：QQ</h3>
	<div class="content">举例：&lt;input type="text" name="qq" class="coo-qq" /&gt;
		<br />实例：<input type="text" name="qq" class="coo-qq" />
	</div>

	<h3>ip：IP地址</h3>
	<div class="content">举例：&lt;input type="text" name="ip" class="coo-ip" /&gt;
		<br />实例：<input type="text" name="ip" class="coo-ip" />
	</div>

	<h3>reg：自定义验证规则</h3>
	<div class="content">举例：&lt;input type="text" name="reg" class="coo-reg" reg="^\d{4}$" css="reg" /&gt;
		<br />实例：<input type="text" name="reg" class="coo-reg" reg="^\d{4}$" css="reg" />
	</div>

	<h3>color：颜色控件 <span class="note">(可设置options自定义属性)</span></h3>
	<div class="content">举例：&lt;input type="text" name="color" class="coo-color" options="{size:15,type:'small'}" /&gt; <a href="javascript:void(0)" anchor="colorarea')">详细参数</a>
		<br />实例：<input type="text" name="color" class="coo-color" options="{size:15,type:'small'}" />
	</div>

	<h3>! 验证标签：验证对象可以不填, 否则必须符合验证规则</h3>
	<div class="content">举例：&lt;input type="text" name="tag" class="coo-!num" /&gt;
		<br />实例：<input type="text" name="tag" class="coo-!num" />
	</div>

	<h3>下面的id指目标对象的id或name</h3>
	<h3>= expr：是否与目标对象的值相等</h3>
	<div class="content">举例：&lt;input name="test1" class="coo-need" /&gt;&lt;input type="text" name="test1i" class="coo-=#test1" /&gt;
		<br />效果：<input type="text" name="test1" class="coo-need" />&nbsp;
		<br />实例：<input type="text" name="test1i" class="coo-=#test1" />
	</div>

	<h3>% expr：两个对象至少一个不为空</h3>
	<div class="content">举例：&lt;input type="text" name="test2" /&gt;&lt;input type="text" name="test2i" class="coo-%#test2" /&gt;
		<br />效果：<input type="text" name="test2" />&nbsp;
		<br />实例：<input type="text" name="test2i" class="coo-%#test2" />
	</div>

	<h3>^ expr：两个保持为空, 否则如果其中一个不为空, 即另一个也不能为空</h3>
	<div class="content">举例：&lt;input type="text" name="test3" /&gt;&lt;input type="text" name="test3i" class="coo-^#test3" /&gt;
		<br />效果：<input type="text" name="test3" />&nbsp;
		<br />实例：<input type="text" name="test3i" class="coo-^#test3" />
	</div>

	<h3>&gt; expr：输入的数字要比目标对象的大或相等, 支持日期标识, 自定义属性#=str：提示信息中对比的控件的名称</h3>
	<div class="content">举例：&lt;input type="text" name="test4" class="coo-num" /&gt;&lt;input type="text" name="test4i" #="效果" class="coo-&gt;#test4" /&gt;
		<br />效果：<input type="text" name="test4" class="coo-num" />&nbsp;
		<br />实例：<input type="text" name="test4i" #="效果" class="coo->#test4" />
	</div>

	<h3>&lt; expr：输入的数字要比目标对象的小或相等, 支持日期标识, 自定义属性#=str：提示信息中对比的控件的名称</h3>
	<div class="content">举例：&lt;input type="text" name="test5" class="coo-num" /&gt;&lt;input type="text" name="test5i" #="效果" class="coo-&lt;#test5" /&gt;
		<br />效果：<input type="text" name="test5" class="coo-num" />&nbsp;
		<br />实例：<input type="text" name="test5i" #="效果" class="coo-<#test5" />
	</div>

	<h3>@ expr：选择日期后立即跳到expr <span class="note">(日期标识才有效)</span></h3>
	<div class="content">举例：&lt;input type="text" name="test6" class="coo-date-@#test6i" /&gt;&lt;input type="text" name="test6i" class="coo-date-&gt#test6" /&gt;
		<br />效果：<input type="text" name="test6" class="coo-date-@#test6i" />&nbsp;
		<br />实例：<input type="text" name="test6i" class="coo-date->#test6" />
	</div>

	<h3>以下直接使用数字来验证</h3>
	<h3>= number：输入数字必须等于number</h3>
	<div class="content">举例：&lt;input type="text" name="d" class="coo-=200" /&gt;
		<br />实例：<input type="text" name="d" class="coo-=200" />
	</div>

	<h3>% number：输入数字必须为number的正整倍数</h3>
	<div class="content">举例：&lt;input type="text" name="y" class="coo-%3" /&gt;
		<br />实例：<input type="text" name="y" class="coo-%3" />
	</div>

	<h3>&gt; number：输入数字必须大于number</h3>
	<div class="content">举例：&lt;input type="text" name="b" class="coo-&gt;200" /&gt;
		<br />实例：<input type="text" name="b" class="coo->200" />
	</div>

	<h3>&lt; number：输入数字必须小于number</h3>
	<div class="content">举例：&lt;input type="text" name="s" class="coo-&lt;200" /&gt;
		<br />实例：<input type="text" name="s" class="coo-<200" />
	</div>

	<h3>l number：输入长度必须等于number</h3>
	<div class="content">举例：&lt;input type="text" name="l" class="coo-l7" /&gt;
		<br />实例：<input type="text" name="l" class="coo-l7" />
	</div>

	<h3>m number：输入长度必须少于或等于number</h3>
	<div class="content">举例：&lt;input type="text" name="m" class="coo-m8" /&gt;
		<br />实例：<input type="text" name="m" class="coo-m8" />
	</div>

	<h3>n number：输入长度必须多于或等于number</h3>
	<div class="content">举例：&lt;input type="text" name="n" class="coo-n6" /&gt;
		<br />实例：<input type="text" name="n" class="coo-n6" />
	</div>

	<h3>e types：允许选择的文件类型 <span class="note">(多个文件类型用"|"隔开后缀名)(一般file控件用)</span></h3>
	<div class="content">举例：&lt;input type="file" name="e" class="coo-ejpg|txt|gif" /&gt;
		<br />实例：<input type="file" name="e" class="coo-ejpg|txt|gif" />
	</div>

	<a id="uploadarea"></a>
	<h2>上传控件</h2>
	<h3>使用自定义属性达到美化、AJAX上传</h3>
	<div class="content">
	<pre>
	function ajaxUploadFn(){
		return {
			success : function(data, status){
				if(typeof(data.error)!='undefined'){
					if(data.error!=''){
						alert(data.message);
					}else{
						alert(data.url);
					}
				}
			},
			error : function(data, status, e){
				alert('Upload error\n'+e);
			},
			complete : function(data, status){
				alert('Upload complete');
			}
		}
	}</pre>
		<style>
		.upload1, .upload2, .upload3{width:70px; height:19px; background:url(http://static.cechoice.com/images/ajup.gif);}
		</style>
		举例：&lt;input type="file" name="u" class="uploadbtn coo-!ejpg" src="upload.gif" hoversrc="upload.gif" clicksrc="upload.gif" w="70" h="19" url="upload.php" loading="loading.gif" data="{filename:'files',addtime:'2012-11-17'}" callback="ajaxUploadFn" /&gt;<br />
		或者：&lt;input type="file" name="u" class="uploadbtn coo-!ejpg" src=".upload1" hoversrc=".upload2" clicksrc=".upload3" /&gt;<br />
		实例：<input type="file" name="u" class="uploadbtn coo-!ejpg" src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211130901.gif" url="upload.php" loading="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211156398.gif" data="{filename:'files',addtime:'2012-11-17'}" callback="ajaxUploadFn" /><br />
		<br />直接调用：
		<pre>
	控件美化：
	$(expr).filestyle({
		text : '', //默认文字
		src : '', //默认图片(设置后默认文字无效)|类名:.class
		hoversrc : '', //鼠标经过时的图片|类名:.class
		clicksrc : '', //按下鼠标时的图片|类名:.class
		width : 0, //宽度
		height : 0, //高度
		disabled : false, //是否禁用
		callback : null //选择后执行(接受一个参数:本对象[jQuery])
	});

	AJAX上传：
	$(expr).ajaxupload({
		url : 'upload.php', //上传提交的目标网址
		postName : 'filename', //非file控件上传时指定的提交控件名称
		loading : '', //上传中在右边显示的图片路径
		innerFile : $.browser.mobile, //直接在内部生成input:file,为兼容某些浏览器不支持模拟点击
		dataType : 'json', //请求类型
		data : null, //上传时一同提交的数据
		multiple : false, //多文件选择(只支持HTML5浏览器)
		after : null, //选择后执行, 若返回false即终止上传, 接受一个参数:选择的文件数量
		cancel : null, //终止上传后执行
		callback : null //上传操作完毕后返回的回调函数(函数|对象字面量)
	});</pre>
		<br />非上传控件上传：<a href="javascript:void(0)" id="uplink">点击上传</a>、<input type="button" id="upbtn" value="点击上传" class="ybtn">
		<br />同时调用：$(expr).filestyle().ajaxupload();
	</div>
	<script>
	$('#uplink, #upbtn').ajaxupload({
		url : 'upload.php',
		postName : 'filename',
		callback : {
			success : function(data, status){
				if(typeof(data.error)!='undefined'){
					if(data.error=='1'){
						alert(data.message);
					}else{
						alert(data.url[0]);
					}
				}
			},
			error : function(data, status, e){
				alert('Upload error\n'+e);
			}
			/*
			,complete : function(data, status){
				alert('Upload complete');
			}
			*/
		}
	});
	function ajaxUploadFn(){
		return {
			success : function(data, status){
				if(typeof(data.error)!='undefined'){
					if(data.error!=''){
						alert(data.message);
					}else{
						alert(data.url);
					}
				}
			},
			error : function(data, status, e){
				alert('Upload error\n'+e);
			}
		}
	}
	</script>

	<h2>日期控件</h2>
	<h3>date：绑定日期控件 <span class="note">(可设置options自定义属性)(注：为能通过验证, 返回格式统一yyyy-m-d(视just参数而定), format参数将会无效)</span></h3>
	<div class="content">举例：&lt;input type="text" name="dt" class="coo-date" options="{minDate:'-7d',maxDate:'+5d',format:'yy年mm月dd日'}" /&gt; <a href="javascript:void(0)" anchor="datearea')">详细参数</a>
		<br />实例：<input type="text" name="dt" class="coo-date" options="{minDate:'-7d',maxDate:'+5d',format:'yy年mm月dd日'}" />
	</div>

	<style>
	.select-s{text-align:left; display:inline-block; *display:inline; *zoom:1; text-decoration:none; color:#333; height:23px; line-height:23px; overflow:hidden; padding:0 0 0 3px; border:1px solid #bbb; background-color:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.1); vertical-align:middle; font-family:"Microsoft YaHei",Arial; -moz-transition:border 300ms ease-out; -webkit-transition:border 300ms ease-out; -o-transition:border 300ms ease-out;}
	.select-s:hover, .select-s-x{border-color:#1E7BDB; text-decoration:none; color:#333;}
	.select-s strong{display:block; float:right; margin:9px 5px 0 0; width:0; height:0; overflow:hidden; border:5px solid; border-color:#666 #fff #fff #fff; -moz-transition:all 200ms ease-out; -webkit-transition:all 200ms ease-out; -o-transition:all 200ms ease-out;}
	.select-s-x strong{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); -moz-transform-origin:50% 2px; -webkit-transform-origin:50% 2px; -o-transform-origin:50% 2px;}
	.select-l{border-radius:4px; position:absolute; left:0; top:0; z-index:1000; float:left; width:auto; height:auto; border:1px solid #999; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.5);}
	.select-l ul{text-align:left; line-height:25px; padding:7px 0; white-space:nowrap; outline:0; overflow:auto; overflow-x:hidden;}
	.select-l ul li{float:left; width:100%; margin-bottom:1px;}
	.select-l a, .select-l a:link, .select-l a:visited, .select-l a:hover{display:block; padding-left:10px; line-height:20px; text-decoration:none; color:#555; text-shadow:0 -1px 0 #fff; width:auto; height:auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
	.select-l a:hover, .select-l a.this, .select-l a.this:hover{background-color:#196DC4; color:#fff; text-shadow:0 -1px 0 #135aa4;}
	.select-l strong, .select-l span{display:block; color:#555; cursor:default; padding-left:10px; line-height:20px;}
	.select-l ul::-webkit-scrollbar{width:5px; height:5px;}
	.select-l ul::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px rgba(0,0,0,0.5); background:rgba(0,0,0,0.1);}
	.select-l ul::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3);}
	.select-l ul::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.5);}
	</style>
	<h3>time：日期联动 <span class="note">(下拉框有效)</span></h3>
	<div class="content">
		min、max 最小、最大年份(this代表今年)<br />
		v 指定选中(不设定即选中当前年月日)<br />
		target 月日expr(只支持年)<br />
		<br />举例：&lt;select name="year" id="year" class="coo-time" type="year" min="2000" max="2020" target="#month,#day"&gt;&lt;/select&gt;<br />
		&lt;select name="month" id="month" type="month" v="4"&gt;&lt;/select&gt;<br />
		&lt;select name="day" id="day" type="day"&gt;&lt;/select&gt;<br />
		直接调用：<pre>
	$(expr).linkdate({
		year : '#year', //年
		month : '#month', //月
		day : '#day', //日
		min : 1970, //最小年
		max : new Date().getFullYear()+15 //最大年
	});</pre>
		<select name="year" id="year" class="coo-time" type="year" min="2000" max="2020" target="#month,#day"></select>年&nbsp;
		<select name="month" id="month" type="month" v="4"></select>月&nbsp;
		<select name="day" id="day" type="day"></select>日<br />
		<br />
		下拉框美化：&lt;select name="fs" normal="select-s" focus="select-s-x" option="select-l"&gt;&lt;/select&gt;
		<div>实例：<select id="fs" name="fs" normal="select-s" focus="select-s-x" option="select-l" onChange="chgFs()"><option>请选择</option><optgroup label="选项组"></optgroup><option value="1">第一项</option><option value="2" style="color:#c74321;">第二项</option><option value="3" disabled="disabled">第三项</option></select>
		<select id="fsf" normal="select-s" focus="select-s-x" option="select-l"></select>
		<select normal="select-s" focus="select-s-x" option="select-l" disabled><option>禁用</option></select>
		</div>
		直接调用：<pre>
	$(expr).selectstyle({
		normal : '', //美化使用的类名
		focus : '', //显示下拉列表后增加的类名
		option : '', //下拉列表的类名
		callback : null //选择后执行,this:本对象
	});</pre>
	</div>
	<script>
	function chgFs(){
		var val = Number($('#fs').selected().val()), fsf = $('#fsf');
		switch(val){
			case 1:fsf.html('<option>A</option><option>B</option>').data('replacehtml',true).selectstyle();break;
			case 2:fsf.html('<option>C Option</option><option>D Option</option>').data('replacehtml',true).selectstyle();break;
			default:fsf.html('').data('replacehtml',true).selectstyle();break;
			//注意 selectstyle 有没有样式参数
		}
	}
	</script>

	<h3>文本区域</h3>
	<div class="content">举例：&lt;textarea name="t" class="coo-need"&gt;&lt;/textarea&gt;
		<br />实例：<textarea name="t" class="coo-need" style="height:70px;vertical-align:top;"></textarea>
	</div>
	</div>

	<style>
	.tabsub{border:1px solid #999; background:#eee;}
	.tabsubtitle li{float:left; height:20px; line-height:20px; font-size:12px; padding:0 15px; color:#666; border:1px solid #999; border-bottom:none; margin-right:2px; cursor:pointer; background:#ccc;}
	.tabsubtitle li.this{background:#eee;}
	</style>
	<h2>默认值</h2>
	<h3>v值、t值：自动选中 <span class="note">(t值下拉框有效)</span></h3>
	<a id="tabsarea"></a>
	<h3>下拉框：</h3>
	<div class="content">
	选项卡：<pre>
	$(expr).tabs({
		list : 'li', //选项卡内容列表的标签
		tab : 'li', //生成的选项卡标题列表容器的标签
		tabcls : 'tab-title', //生成的选项卡标题列表容器的类名
		tabhovercls : 'hover', //选项卡标题列表的鼠标悬停类名
		tabactcls : 'this', //选项卡标题列表的选中后类名
		tabdiscls : 'disabled', //选项卡标题列表的禁用后类名
		tabdis : [], //禁用的选项卡的索引,或在内容列表的标签加上disabled
		index : 0, //默认显示的选项卡
		effect : '', //切换动画(需导入css),[空|movex|movey|opacity|scale|scaleout|skew|left|up|rotate|flip]
		act : 'click', //切换选项卡的操作
		auto : 0, //自动转换选项卡时间间隔,0:不自动
		after : null, //切换后执行,一个参数(当前点击的选项卡的索引)
		complete : null //代码完成后执行
	});
	options为数字时即选项卡切换到该数字索引的选项卡</pre>
		<a href="javascript:void(0)" id="selectTab">选项卡切换到第3个</a>
		<div style="height:50px;"></div>
		<ul class="tab">
			<li title="v值选项卡">
				opt添加自定义选项(格式：val1|txt1^val2|txt2), optpos添加位置(first:第一项之前, last:最后, 索引:该索引的选项之前)
				<br />举例：&lt;select name="select" opt="val1|txt1^val2|txt2" optpos="first" class="coo-need-v4"&gt;&lt;/select&gt;若4与option的value相等则选中
				<br />实例：
				<select name="select" opt="val1|txt1^val2|txt2" optpos="first" class="select coo-need-v4">
				<option>--</option>
				<option value="1">第一个</option>
				<option value="2">第二个</option>
				<option value="3">第三个</option>
				<option value="4">第四个</option>
				<option value="5">第五个</option>
				</select>
			</li>
			<li title="t值选项卡">
				举例：&lt;select name="selectT" class="coo-need-t中学"&gt;&lt;/select&gt;若中学与option的text相等则选中
				<br />实例：
				<select name="selectT" class="select coo-need-t中学">
				<option>请选择</option>
				<option value="1">大学</option>
				<option value="2">中学</option>
				<option value="3">小学</option>
				</select>
			</li>
			<li>
				选项卡三
				<ul class="tabsub">
					<li>TAB 1</li>
					<li>TAB 2</li>
				</ul>
			</li>
			<li disabled="disabled">选项卡四</li>
			<li>选项卡五</li>
			<li>选项卡六</li>
		</ul>
	</div>
	<script>
	$('#selectTab').click(function(){
		$('.tab').tabs(2);
	});
	$('.tabsub').tabs({
		tabcls : 'tabsubtitle',
		tabactcls : 'this',
		effect : 'movex',
		act : 'mouseover',
		auto : 5000
	});
	$('.tab').tabs({
		list : 'li', //选项卡内容列表的标签
		tab : 'li', //生成的选项卡标题列表容器的标签
		tabcls : 'tab-title', //生成的选项卡标题列表容器的类名
		tabhovercls : 'hover', //选项卡标题列表的鼠标悬停类名
		tabactcls : 'this', //选项卡标题列表的选中后类名
		tabdiscls : 'disabled', //选项卡标题列表的禁用后类名
		tabdis : [], //禁用的选项卡的索引,或在内容列表的标签加上disabled
		index : 0, //默认显示的选项卡
		effect : '', //切换动画(需导入css),[空|movex|movey|opacity|scale|scaleout|skew|left|up|rotate|flip]
		act : 'click', //切换选项卡的操作
		auto : 0, //自动转换选项卡时间间隔,0:不自动
		after : null, //切换后执行,一个参数(当前点击的选项卡的索引)
		complete : null //代码完成后执行
	});
	</script>

	<h3>多选框：need标签判断最少要选择一项 <span class="note">(只要其中一个有need标签, 即整个多选组有效)</span></h3>
	<div class="content">举例：&lt;input type="checkbox" name="c" class="coo-need-v2" /&gt;若2与checkbox的值相等则自动选中
		<div>实例：
			<input type="checkbox" name="c" id="c1" value="1" /><label for="c1">1</label>
			<input type="checkbox" name="c" id="c2" class="coo-need-v0" value="2" /><label for="c2">2</label>
			<input type="checkbox" name="c" id="c3" class="coo-need-v2" value="3" /><label for="c3">3</label>
			<input type="checkbox" name="c" id="c4" class="coo" value="4" checked="checked" /><label for="c4">4</label>
		</div>
		<style>
		
		/* 多选框 */
		.checkbox{display:inline-block; zoom:1; *display:inline; vertical-align:middle; margin-right:3px; text-align:center; width:16px; height:16px; overflow:hidden;}
		.checkbox input{display:none;}
		.checkbox label{display:block; width:14px; height:14px; overflow:hidden; cursor:pointer; border-radius:3px; background:#fff; border:1px solid #a5a5a5; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
		.checkbox label div{position:relative; margin:0 auto; width:14px; height:14px; overflow:hidden; font-size:12px; font-family:consolas; color:#fff; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; -webkit-transform:scale(0); transform:scale(0);}
		.checkbox label div:after{content:''; display:block; position:absolute; width:9px; height:5px; background-color:transparent; top:2px; left:1px; border:3px solid #3493f9; border-top:none; border-right:none; -webkit-transform:rotate(-45deg) scale(0.7); transform:rotate(-45deg) scale(0.7); box-shadow:0 1px 3px rgba(0,0,0,0);}
		.checkbox label:hover{border-color:#3493f9;}
		.checkbox input:checked + label{background:#419bf9; border-color:#3493f9;}
		.checkbox input:checked + label div{-webkit-transform:scale(1); transform:scale(1);}
		.checkbox input:checked + label div:after{box-shadow:0 1px 3px rgba(0,0,0,0.3); border-color:#fff;}
		.checkbox input:disabled + label, .checkbox input:disabled + label:hover{border-color:#ccc; background:#f6f6f6; cursor:not-allowed;}
		.checkbox input:disabled + label div:after{border-color:#959595; box-shadow:0 1px 0 #fff;}
		
		/* 多选框 APP */
		.checkbox-app{display:inline-block; vertical-align:middle;}
		.checkbox-app div{width:52px; height:32px; border-radius:32px; box-sizing:border-box; background:#e5e5e5; position:relative; z-index:0; margin:0; padding:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; border:none; cursor:pointer; -webkit-transition-duration:300ms; transition-duration:300ms; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
		.checkbox-app div:before{content:""; position:absolute; z-index:1; left:1px; top:1px; width:50px; height:30px; border-radius:30px; box-sizing:border-box; background:#fff; -webkit-transform:scale(1); transform:scale(1); -webkit-transition-duration:300ms; transition-duration:300ms; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
		.checkbox-app div:after{content:""; position:absolute; z-index:2; top:1px; left:1px; width:30px; height:30px; border-radius:100%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.4); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition-duration:300ms; transition-duration:300ms; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
		.checkbox-app input{display:none;}
		.checkbox-app input:checked + div{background:#4cd964;}
		.checkbox-app input:checked + div:before{-webkit-transform:scale(0); transform:scale(0);}
		.checkbox-app input:checked + div:after{-webkit-transform:translate3d(20px,0,0); transform:translate3d(20px,0,0);}
		.checkbox-app input:disabled + div{cursor:not-allowed; background:#f1f1f1;}
		.checkbox-app input:disabled + div:after{box-shadow:0 2px 5px rgba(0,0,0,0.15);}
		
		/* boximage(美化,使用图片) */
		/* <input type="checkbox" src=".img-checkbox" check=".img-checkbox-check" hover=".img-checkbox-hover" disable=".img-checkbox-disable"> */
		.boximage{margin-bottom:-6px;}
		.img-checkbox{cursor:pointer; display:inline-block; zoom:1; *display:inline; width:21px; height:21px; margin-bottom:-6px; background:url(http://static.cechoice.com/images/checkbox.png);}
		.img-checkbox-hover{background-position:0 -21px;}
		.img-checkbox-check{background-position:0 -42px;}
		.img-checkbox-disable{background-position:0 -63px; cursor:not-allowed;}
		</style>
		<br />美化：&lt;input type="checkbox" name="fc" cls="checkbox" /&gt;
		<div>实例：
			<input type="checkbox" name="fc" id="fc1" value="1" cls="checkbox" checked /><label for="fc1">fc1</label>
			<input type="checkbox" name="fc" id="fc2" value="2" onClick="alert(this.value)" /><label for="fc2">fc2</label>
			<input type="checkbox" name="fc" id="fc3" value="3" disabled /><label for="fc3">fc3</label>
			<input type="checkbox" name="fc" id="fc4" value="4" checked disabled /><label for="fc4">fc4</label>
		</div>
		<br />APP：&lt;input type="checkbox" name="app" value="app" face="checkbox-app" checked /&gt;
		<div>checkbox实例：
			<input type="checkbox" name="app" value="app1" face="checkbox-app" id="app1" checked />
			<input type="checkbox" name="app" value="app2" face="checkbox-app" id="app2" />
			<input type="checkbox" name="app" value="app3" face="checkbox-app" id="app3" disabled />
			<input type="checkbox" name="app" value="app4" face="checkbox-app" id="app4" checked disabled />
		</div>
		<div>radio实例：
			<input type="radio" name="appr" value="appr1" face="checkbox-app" id="appr1" checked />
			<input type="radio" name="appr" value="appr2" face="checkbox-app" id="appr2" />
			<input type="radio" name="appr" value="appr3" face="checkbox-app" id="appr3" disabled />
		</div>
		直接调用：<pre>
	使用CSS3
	$(expr).boxstyle({
		cls : '', //样式类名
		face : '', //app类型按钮的类名
		callback : null //选择后执行(接受一个参数:本对象[jQuery])
	});
	
	使用图片
	$(expr).boximage({
		src : '', //默认图片|类名:.class
		check : '', //选择后的图片|类名:.class
		hover : '', //鼠标经过时的图片|类名:.class
		disable : '', //禁用时的图片|类名:.class
		face : '', //app类型按钮的类名
		width : 0, //宽度(用类名时可为0)
		height : 0, //高度(用类名时可为0)
		callback : null //选择后执行(接受一个参数:本对象[jQuery])
	});</pre>
	</div>

	<h3>单选框：</h3>
	<div class="content">举例：&lt;input type="radio" name="r" class="coo-need-v2" /&gt;若2与radio的值相等则自动选中
		<div>实例：
			<input type="radio" name="r" id="r1" value="1" /><label for="r1">1</label>
			<input type="radio" name="r" id="r2" value="2" /><label for="r2">2</label>
			<input type="radio" name="r" id="r3" class="coo-need" value="3" /><label for="r3">3</label>
		</div>
		<style>
		/* 单选框 */
		.radio{display:inline-block; zoom:1; *display:inline; vertical-align:middle; margin-right:3px; text-align:center; width:16px; height:16px; overflow:hidden;}
		.radio input{display:none;}
		.radio label{display:block; width:14px; height:14px; overflow:hidden; cursor:pointer; border-radius:8px; background:#fff; border:1px solid #a5a5a5; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
		.radio label div{margin:0 auto; margin-top:4px; width:6px; height:6px; overflow:hidden; border-radius:3px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0); -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; -webkit-transform:scale(2); transform:scale(2);}
		.radio label:hover{border-color:#3493f9;}
		.radio input:checked + label{background:#419bf9; border-color:#3493f9;}
		.radio input:checked + label div{box-shadow:0 1px 3px rgba(0,0,0,0.3); -webkit-transform:scale(1); transform:scale(1);}
		.radio input:disabled + label, .radio input:disabled + label:hover{border-color:#ccc; background:#f6f6f6; cursor:not-allowed;}
		.radio input:disabled + label div{background:#f6f6f6;}
		
		/* boximage(美化,使用图片) */
		/* <input type="radio" src=".img-radio" check=".img-radio-check" hover=".img-radio-hover" disable=".img-radio-disable"> */
		.img-radio{cursor:pointer; display:inline-block; zoom:1; *display:inline; width:21px; height:21px; margin-bottom:-6px; background:url(http://static.cechoice.com/images/radio.png);}
		.img-radio-hover{background-position:0 -21px;}
		.img-radio-check{background-position:0 -42px;}
		.img-radio-disable{background-position:0 -63px; cursor:not-allowed;}
		</style>
		<br />美化：&lt;input type="radio" name="fr" cls="radio" /&gt;
		<div>实例：
			<input type="radio" name="fr" id="fr1" value="1" cls="radio" /><label for="fr1">fr1</label>
			<input type="radio" name="fr" id="fr2" value="2" checked /><label for="fr2">fr2</label>
			<input type="radio" name="fr" id="fr3" value="3" disabled /><label for="fr3">fr3</label>
		</div>
		<div class="clear"></div>
	</div>

	<h3>最[少|多]选择n项 <span class="note">(一般用在checkbox、select[multiple])</span></h3>
	<div class="content">
		[need|min|max]标识后面的数字为最[少|多]选择的项数, 或使用need标识加[need|min|max]自定义属性, 如class="coo-need" need="3"
		<br />举例：&lt;input type="checkbox" name="cm" class="coo-need2" /&gt; 最少选择2项
		<br />　　　&lt;input type="checkbox" name="cm" class="coo-need" need="2" /&gt; 最少选择2项
		<br />　　　&lt;input type="checkbox" name="cm" class="coo-min2" /&gt; 最少选择2项
		<br />　　　&lt;input type="checkbox" name="cm" class="coo-need" min="2" /&gt; 最少选择2项
		<br />　　　&lt;input type="checkbox" name="cm" class="coo-max3" /&gt; 最多选择3项
		<br />　　　&lt;input type="checkbox" name="cm" class="coo-need" max="3" /&gt; 最多选择3项
		<div>实例：
			<input type="checkbox" name="cm" id="cm1" value="cm1" /><label for="cm1">cm1</label>
			<input type="checkbox" name="cm" id="cm2" value="cm2" class="coo-min2-max3" /><label for="cm2">cm2</label>
			<input type="checkbox" name="cm" id="cm3" value="cm3" /><label for="cm3">cm3</label>
			<input type="checkbox" name="cm" id="cm4" value="cm4" /><label for="cm4">cm4</label>
		</div>
		<div>列表：
			<select name="sx" class="coo-need2" multiple="multiple" style="vertical-align:top;width:150px;height:90px;">
			<option value="multiple1">multiple列表1</option>
			<option value="multiple2">multiple列表2</option>
			<option value="multiple3">multiple列表3</option>
			<option value="multiple4">multiple列表4</option>
			</select>
		</div>
		<div>最多：
			<input type="checkbox" name="cma" id="cma1" value="cma1" /><label for="cma1">cma1</label>
			<input type="checkbox" name="cma" id="cma2" value="cma2" class="coo-need" max="3" /><label for="cma2">cma2</label>
			<input type="checkbox" name="cma" id="cma3" value="cma3" class="coo-need" min="2" /><label for="cma3">cma3</label>
			<input type="checkbox" name="cma" id="cma4" value="cma4" /><label for="cma4">cma4</label>
		</div>
	</div>

	<div class="content">
		<input type="button" value=" 外部提交 " style="float:right;" class="ybtn" onClick="$('.checkform').submit()" />
		<input type="submit" value=" 提交 " />
		<input type="reset" value=" 重置 " />
		<input type="button" class="bbtn" value=" 增加 " onClick="addField()" />
		<input type="checkbox" id="k" class="coo-need" error="必须同意！" errorcss="agree" /><label for="k">同意</label>
	</div>
	</form>
	<script>
	$('.checkform').coo();
	function doSubmit(){
		alert('onSubmit操作');
		return false;
	}
	function addField(){
		$('.checkform').append('<div class="content"><input type="checkbox" name="q" value="1" />1 <input type="checkbox" name="q" class="coo-need" value="2" />2</div>');
	}
	</script>
	<br />


	<a id="diyarea"></a>
	<form action="#" id="prefix" method="post" target="_blank">
	<h2>自定义验证标识前缀</h2>
	<div class="content"><pre>
	$(function(){
		$(expr).coo({
			prefix : 'prefix',
			callback : function(){alert('测试通过');return false}
		});
	});</pre>
	举例：&lt;input type="text" name="need" class="prefix-need" /&gt;
	<div class="input">填写：<input type="text" name="need" class="prefix-need" /></div>
	<div class="input">数字：<input type="text" name="num" class="prefix-num" /></div>
	</div>
	<div class="content"><input type="submit" value=" 提交 " /></div>
	</form>
	<script>
	$('#prefix').coo({
		prefix : 'prefix',
		callback : function(){alert('测试通过');return false}
	});
	</script>
	<br />


	<a id="functionarea"></a>
	<form action="#" id="from" method="post" onSubmit="doSubmit()" target="_blank">
	<h2>回调函数, 使用函数类型</h2>
	<div class="content"><pre>
	var callback = function(form){
		alert('回调函数');
		return false;
	}
	$(expr).coo(callback);</pre>
	<div class="input">填写：<input type="text" name="callback" class="coo-need" /></div>
	</div>
	<div class="content"><input type="submit" value="回调函数测试" /></div>
	</form>
	<script>
	var callback = function(form){
		alert('回调函数');
		return false;
	};
	$('#from').coo(callback);
	</script>
	<br />


	<a id="objarea"></a>
	<form action="#" id="data" method="post" target="_blank">
	<h2>回调函数, 使用对象字面量类型</h2>
	<div class="content"><pre>
	var obj = {
		prefix : 'coo', //自定义验证标签前缀
		debug : false, //调试模式(不提交表单)
		lay : false, //提交后表单添加遮罩
		delay : 0, //延迟提交
		disBtn : true, //提交后禁用提交按钮
		dialog : false, //所有提示信息使用alert
		pos : null, //所有提示信息默认位置
		addclass : [], //扩展需验证的expr(使用非coo前缀类名, 数组长度与addreg对应)
		addreg : [], //扩展需验证的expr对应的验证正则(数组长度与addclass对应)
		autosave : { //自动保存表单控件的数据, 默认null
			clear : false, //提交后立即清空
			expires : 0, //自动保存过期时间, 单位天
			interval : 0, //保存间隔, 单位秒
			exceptEl : [], //指定不保存的控件, expr|element|jquery
			aloneEl : [] //单独一个Cookie保存的控件与对应的Cookie名, 值：[['expr1','cookie1'], ['expr2','cookie2']], 一般长内容控件用
		},
		ajaxSubmit : function(data){
			alert('使用AJAX提交表单后执行(设置后表单转为AJAX提交)');
		},
		meBefore : {
			el : 'expr', //如果指定控件存在字面量格式字符串的自定义属性meBefore, 即字面量可省略el
			fn : function(){
				alert('指定某控件改变值前执行, this代表该控件');
			}
		},
		meAfter : {
			el : 'expr', //如果指定控件存在字面量格式字符串的自定义属性meAfter, 即字面量可省略el
			tips : '二步验证错误了, 如果fn不返回boolean, 即tips可省略',
			fn : function(error){
				alert('指定某控件改变值且验证后执行, this代表该控件');
			}
		},
		argBefore : function(){ //可独自使用函数格式字符串的自定义属性argBefore
			alert('控件改变值前执行, this代表当前验证的控件');
		},
		argAfter : function(error){ //可独自使用函数格式字符串的自定义属性argAfter
			alert('控件改变值且验证后执行, this代表当前验证的控件'');
		},
		reset : function(form){
			//alert('重置后执行');
		},
		before : function(form){
			alert('提交且验证前执行');
			//return false; //可以不返回Boolean类型
		},
		after : function(form, error){
			alert('提交且验证后执行');
			//回调没有意义, 交由callback执行
		},
		callback : function(form){
			alert('所有验证通过后执行的回调函数');
			return false;
		}
	}
	$(expr).coo(obj);</pre>
	<div class="input">填写：<input type="text" name="data" class="coo-need" /></div>
	</div>
	<div class="content"><input type="submit" value="回调函数测试" /></div>
	</form>
	<script>
	var obj = {
		lay : true,
		delay : 1000,
		ajaxSubmit : function(data){
			//alert(data);
		},
		before : function(form){
			//alert('提交且验证前执行');
		},
		after : function(form){
			//alert('提交且验证后执行');
		},
		callback : function(form){
			//alert('callback回调函数');
			//return false;
		}
	};
	$('#data').coo(obj);
	</script>
	<br />


	<a id="extendarea"></a>
	<form action="#" id="data2" method="post" target="_blank">
	<h2>扩展需验证的expr, 可不需使用coo前缀标识类名的格式 <span class="note">(coo前缀类名验证仍然有效)</span></h2>
	<div class="content"><pre>
	$(expr).coo({
		addclass : ['.required', '[diy="img"]'], //扩展需验证的expr(使用非coo前缀类名, 数组长度与addreg对应)
		addreg : ['.+', '\.(jpg|jpeg|png|gif|bmp)$'] //扩展需验证的expr对应的验证正则(数组长度与addclass对应)
	});</pre>
	<div class="input">正常：<input type="text" name="data2coo" class="coo-need" /></div>
	<div class="input">填写：<input type="text" name="data2text" class="required" /></div>
	<div>选择：
	<input type="checkbox" name="data2checkbox" value="checkbox1" />checkbox1
	<input type="checkbox" name="data2checkbox" value="checkbox2" class="required" />checkbox2
	<input type="checkbox" name="data2checkbox" value="checkbox3" />checkbox3
	</div>
	<div>下拉：<select name="data2select" class="required"><option>--</option><option value="option">option</option></select></div>
	<div>文件：<input type="file" diy="img" name="data2file" error="必须选择图片文件" /></div>
	</div>
	<div class="content"><input type="submit" value="测试扩展类名" /></div>
	</form>
	<script>
	$('#data2').coo({
		addclass : ['.required', '[diy="img"]'],
		addreg : ['.+', '\.(jpg|jpeg|png|gif|bmp)$']
	});
	</script>
	<br />


	<a id="autosavearea"></a>
	<form id="autosave" action="#" method="post" target="_blank">
	<h2>自动保存表单控件的数据</h2>
	<h3>只要与原来的数据不同即自动保存到Cookie <span class="note">(密码、文件选择、按钮不保存)</span></h3>
	<div class="content"><pre>
	$(expr).autosave({
		clear : false, //提交后立即清空
		expires : 1, //自动保存过期时间, 单位天
		interval : 60, //保存间隔, 单位秒
		exceptEl : [], //指定不保存的控件, expr|element|jquery
		aloneEl : [] //单独一个Cookie保存的控件与对应的Cookie名, 值：[['expr1','cookie1'], ['expr2','cookie2']], 一般长内容控件用
	});</pre>
	<input type="hidden" id="hidden" value="隐藏域" />
	<div class="input">文本：<input type="text" name="text" /></div>
	<div class="input">不保存：<input type="text" name="nosave" /></div>
	<div>多选：<input type="checkbox" name="checkbox" value="1" />1　<input type="checkbox" name="checkbox" value="2" />2</div>
	<div>单选：<input type="radio" name="radio" value="A" />A　<input type="radio" name="radio" value="B" />B</div>
	<div>下拉：<select name="select"><option value="s1">s1</option><option value="s2">s2</option></select></div>
	<div class="input">文本域：<textarea style="vertical-align:text-top;height:40px;"></textarea></div>
	<div class="input">长内容：<textarea style="vertical-align:text-top;height:70px;"></textarea></div>
	</div>
	<div class="content">
		<input type="submit" value=" 提交 " />
		<input type="reset" value=" 重置 " />
	</div>
	</form>
	<script>
	$('#autosave').coo({
		/*
		autosave : {
			clear : false, //提交后立即清空
			expires : 1, //自动保存过期时间, 单位天
			interval : 60, //保存间隔, 单位秒
			exceptEl : ['[name="nosave"]'], //指定不保存的控件, expr|element|jquery
			aloneEl : [['textarea:eq(1)', 'textarea2']] //单独一个Cookie保存的控件与对应的Cookie名, 值：[['expr1','cookie1'], ['expr2','cookie2']], 一般长内容控件用
		}
		*/
	});
	</script>
	<br />


	<a id="directarea"></a>
	<form action="#" id="infrom" method="post" onSubmit="return incheck()" target="_blank">
	<h2>控件直接验证, 不经过表单</h2>
	<h3>$(expr).coo(tag), tag不填即默认为need</h3>
	<div class="content"><pre>
	function incheck(){
		if(!$('#inneed').coo()){
			alert('必须要填写');
			$('#inneed').focus();
			return false;
		}
		if(!$('#infloat').coo('!float')){
			alert('该项目可不填, 但必须为数字(可带小数)');
			$('#infloat').focus();
			return false;
		}
		if(!$('#innum').coo('num')){
			alert($('#innum').attr('error'));
			$('#innum').focus();
			return false;
		}
	}</pre>
	<div class="input">必填：<input type="text" name="inneed" id="inneed" /></div>
	<div class="input">!小数：<input type="text" name="infloat" id="infloat" /></div>
	<div class="input">数字：<input type="text" name="innum" id="innum" error="自定义提示：请输入数字" /></div>
	</div>
	<div class="content"><input type="submit" value=" 验证且提交 " /></div>
	</form>
	<script>
	function incheck(){
		if(!$('#inneed').coo()){
			alert('必须要填写');
			$('#inneed').focus();
			return false;
		}
		if(!$('#infloat').coo('!float')){
			alert('该项目可不填, 但必须为数字(可带小数)');
			$('#infloat').focus();
			return false;
		}
		if(!$('#innum').coo('num')){
			alert($('#innum').attr('error'));
			$('#innum').focus();
			return false;
		}
	}
	</script>
	<br />


	<a id="noformarea"></a>
	<h2>非表单验证, 必须使用回调函数或者对象字面量才有效, 否则会被认为控件直接验证</h2>
	<h3>验证指定元素内的表单控件, 回调函数是为了验证通过后执行例如AJAX的操作, 对象字面量设定相关参数</h3>
	<div class="content"><pre>
	$(function(){
		$(expr).click(function(){
			$(expr2).coo(function(form){
				alert('执行回调函数');
			});
		});
	});</pre>
	<div id="div" class="input">填写：<input type="text" name="cb" class="coo-need" /></div>
	</div>
	<div class="content"><input id="divbtn" type="button" class="bbtn" value="回调函数测试" /> (这里没有使用form)</div>
	<script>
	$('#divbtn').click(function(){
		$('#div').coo(function(form){
			alert('执行回调函数');
		});
	});
	</script>
	<br />


	<a id="colorarea"></a>
	<h2>直接调用颜色控件</h2>
	<h3>参数默认值</h3>
	<div class="content"><pre>
	$(expr).colorpicker({
		size : 15, //色块大小, 单位像素
		type : '', //big:228色, small:16色, 默认:small
		target : '', //选择颜色后填写颜色的目标元素(不指定即为当前点击对象,null为不填写)
		readonly : true, //可否填写
		over : null, //鼠标移到颜色上执行(接受两个参数:颜色代码,目标对象[jQuery对象])
		out : null, //鼠标移出颜色后执行(一个参数:目标对象[jQuery对象])
		callback : null, //选择后执行(接受两个参数:颜色代码,目标对象[jQuery对象])
	});</pre>
	举例：&lt;input type="text" id="col" /&gt;<br />
	<pre id="colorfn">
	$('#cols, .colr').colorpicker({target:'#cols',callback:function(c){$('#cols, .colr').css('background', c)}});
	$('#colb').colorpicker({
		type : 'big',
		over : function(color, _this){_this.css('background-color', color)},
		out : function(_this){_this.css('background-color', '')},
		callback : function(color, _this){_this.css('background-color', color)}
	});</pre>
	<div class="input">少颜色：<input type="text" id="cols" /> <span class="colr"></span></div>
	<div class="input">多颜色：<input type="text" id="colb" /></div>
	</div>
	<script>eval($('#colorfn').html())</script>
	<br />


	<a id="datearea"></a>
	<h2>直接调用日期控件</h2>
	<h3>参数默认值</h3>
	<div class="content"><pre>
	$(expr).datepicker({
		target : '', //选择日期后填写日期的目标元素(不指定即为当前点击对象)
		cls : '', //使用外部class,而不是内置的样式
		just : '', //只显示选择年份或月份(参数只支持两种:year、month)
		nextEl : '', //选择日期后直接跳到下个日期控件,格式为expr
		flat : false, //平板模式,直接显示在调用者的html内,一般与target参数同时使用
		hiddenNavBar : false, //隐藏导航栏
		breakClick : false, //不执行插件默认的点击选择日期操作
		readonly : true, //可否填写
		range : false, //范围选择,设置后nextEl无效
		multiple : false, //日期多选,设置后nextEl无效
		showTime : false, //显示时分秒,返回的日期格式(format)需自己设定
		showHour : true, //显示时,需设置showTime
		showMinute : true, //显示分,需设置showTime,showHour
		showSecond : true, //显示秒,需设置showTime,showHour,showMinute
		changeYear : true, //可否更改年份
		changeMonth : true, //可否更改月份
		touchMove : true, //拖曳切换年月
		enText : false, //将所有文字改为英文
		yearText : '年', //一般以英文显示才需修改
		monthText : '月', //同上
		weekText : [], //同上,以星期天起始,留空即使用默认
		minYear : 1949, //最小年份(数值型)(字符型:this为今年|[+-]数字(以今天作为界限))
		maxYear : new Date().getFullYear()+15, //最大年份(数值型)(字符型:this为今年|[+-]数字(以今天作为界限))
		disMonths : '', //禁用月份(逗号隔开)
		disDays : '', //禁用每月的某些日(逗号隔开)
		disWeeks : '', //禁用每月的某些星期(逗号隔开)(格式:0,1,2,3,4,5,6,星期日为0)
		disDates : '', //禁用某些日(逗号隔开)(today:使用今天作为日期)(格式:年-月-日)
		minDate : '', //只能选择该日以后的日期(格式:年-月-日)(today:使用今天作为日期)([+-]数字[y|m|d](以今天作为界限))
		maxDate : '', //只能选择该日以前的日期(格式:年-月-日)(today:使用今天作为日期)([+-]数字[y|m|d](以今天作为界限))
		format : 'yyyy-m-d', //以逗号分隔的日期数组内每个日期的格式,range格式:从(#yyyy-m-d)至(#yyyy-m-d)
		date : null, //每个日期生成后执行
		prevMonth : null, //外部切换到上个月的控件
		nextMonth : null, //外部切换到下个月的控件
		prevMonthCallback : null, //点击上个月箭头后执行
		nextMonthCallback : null, //点击下个月箭头后执行
		change : null, //改变年月后执行
		complete : null //生成日期控件后执行
		自定义函数名 : function(dates){...} //可多个自定义函数(只要是函数都会执行),dates参数为[多个日期元素的数组|range两个日期元素的数组]
	});</pre>
	举例：&lt;input type="text" id="dts" /&gt;<br />
	&lt;input type="text" id="dtm" @='#dtl' /&gt;&lt;input type="button" id="dtmb" class="ybtn" value="选择" target="#dtm" /&gt;<br />
	&lt;input type="text" id="dtl" /&gt;<br />
	&lt;input type="text" id="dthns" value="2013-05-30 13:46:19" /&gt;<br />
	&lt;input type="text" id="dtyear" value="" /&gt;<br />
	&lt;input type="text" id="dtmonth" value="" func="function(date, _this){alert(date)}" /&gt;<br />
	<pre id="datefn">
	$('#dts').datepicker({cls:'datepicker2',nextEl:'#dtm',readonly:false,showTime:true,minDate:'-7d',maxDate:'+4d'});
	$('#dtmb').datepicker({myfn:function(dates){alert($.debug(dates))}});
	$('#dthns').datepicker({cls:'datepicker',enText:true,showTime:true,showSecond:false,format:'yyyy-mm-dd hh:nn:ss'});
	$('#dtyear').datepicker({just:'year',format:'yyyy年度'});
	$('#dtmonth').datepicker({just:'month',format:'yyyy年m月'});
	$('.dtstart').datepicker({cls:'datepicker',flat:true,target:'#dtstart',nextEl:'.dtend'});
	$('.dtend').datepicker({flat:true,target:'#dtend'});</pre>
	<div class="input">开始日期：<input type="text" id="dts" /></div>
	<div class="input">过渡日期：<input type="text" id="dtm" @='#dtl' /> <input type="button" id="dtmb" class="ybtn" value=" 选择 " target="#dtm" /></div>
	<div class="input">结束日期：<input type="text" id="dtl" /></div>
	<div class="input">显示时分秒：<input type="text" id="dthns" initdate="2013-05-30 13:46:19" /></div>
	<div class="input">选择年份：<input type="text" id="dtyear" value="" /></div>
	<div class="input">选择月份：<input type="text" id="dtmonth" value="" fn="function(dates){alert($.debug(dates))}" /></div>
	<style>.dtstart, .dtend{float:left; margin-top:15px; margin-right:28px;}</style>
	<div class="input">
		开始：<input type="text" id="dtstart" value="" style="width:182px;" />　　结束：<input type="text" id="dtend" value="" />
		<div>
			<div class="dtstart"></div>
			<div class="dtend"></div>
			<div class="clear"></div>
		</div>
	</div>
	</div>
	<script>eval($('#datefn').html())</script>
	<br />


	<a id="weekarea"></a>
	<h2>周选择器</h2>
	<h3>参数默认值</h3>
	<div class="content"><pre>
	$(expr).weekpicker({
		drag : true, //拖曳滚动
		keydown : true, //箭头键控制滚动
		click : null, //点击日期后执行
		left : null, //点击左按钮后改变周前执行,接受一个参数,当前显示的周的第一天日期
		right : null, //点击右按钮后改变周前执行,接受一个参数,当前显示的周的第一天日期
		change : null, //改变周后执行,接受一个参数,当前显示的周的第一天日期
		complete : null //加载完毕后执行,接受一个参数,当前显示的周的第一天日期
	});</pre>
	<style>
@media only screen and (min-width:601px) {
	.weekarea{width:400px;}
}
	.weekcal{position:relative; width:auto; height:auto; overflow:hidden; text-align:center;}
	.weekcal .ym{position:absolute; z-index:11px; top:0; left:15px; height:36px;}
	.weekcal .ym .year, .weekcal .ym .month{float:left; height:36px; line-height:36px; overflow:hidden; color:#dc0432; font-size:14px;}
	.weekcal .date, .weekcal .date div, .weekcal .date div a, .weekcal .date div font{display:block; margin:0; padding:0; height:36px; line-height:36px; overflow:hidden;}
	.weekcal .date div{position:absolute; top:0; left:50%; width:118px; margin-left:-59px;}
	.weekcal .date div a{float:left; width:26px; text-decoration:none;}
	.weekcal .date div a span{display:block; width:16px; height:16px; line-height:16px; font-size:12px; background:#dc0432; color:#fff; border-radius:8px; margin:0 auto; margin-top:10px;}
	.weekcal .date div font{float:left; width:66px; font-size:14px; color:#dc0432;}
	.weekcal .scroll, .weekcal .scroll .day{border-top:1px solid #e5e5e5;}
	.weekcal .scroll, .weekcal .scroll .part{height:auto;}
	.weekcal .scroll .field{float:left;}
	.weekcal .scroll .week, .weekcal .scroll .day{width:100%; height:44px; line-height:44px; overflow:hidden; font-size:14px;}
	.weekcal .scroll .week li{float:left; color:#999;}
	.weekcal .scroll .day li{float:left; position:relative; cursor:pointer;}
	.weekcal .scroll .day li div{position:absolute; left:25px; top:10px; width:8px; height:8px; background:#dc0432; border-radius:4px;}
	.weekcal .scroll strong{display:block; clear:both; overflow:hidden; width:auto; height:0; font-size:0;}
	</style>
	<div class="weekarea"></div>
	</div>
	<script>$('.weekarea').weekpicker();</script>
	<br />


	<a id="getfieldsarea"></a>
	<form action="#" method="post" onSubmit="return getfields(this)" target="_blank">
	<h2>获取所有控件值</h2>
	<h3>返回组成的查询字符串, 如key1=value1&amp;key2=value2, 一般用在AJAX</h3>
	<div class="content"><pre>
	$(expr).param({
		type : 'object', //返回类型，object|string
		exceptEl : '', //忽略的控件，expr|element|jquery
		id : false //没有name属性时使用id属性代替
	});</pre>
	<input type="hidden" id="hidden" value="隐藏域" />
	<div class="input">文本：<input type="text" name="text" /></div>
	<div class="input">密码：<input type="text" id="password" /></div>
	<div>多选：<input type="checkbox" name="checkbox[]" value="1" />1　<input type="checkbox" name="checkbox[]" value="2" />2</div>
	<div>单选：<input type="radio" name="radio" value="A" />A　<input type="radio" name="radio" value="B" />B</div>
	<div>下拉：<select name="select"><option value="s1">s1</option><option value="s2">s2</option></select></div>
	<div class="input">文本域：<textarea name="textarea" style="vertical-align:text-top;height:40px;"></textarea></div>
	<div>文件选择：<input type="file" name="file" /></div>
	</div>
	<div class="content"><input type="submit" name="submit" value=" SUBMIT按钮 " /></div>
	</form>
	<script>
	function getfields(form){
		var str = $(form).param({
			//type : 'string',
			exceptEl : ':submit,[name="select"]',
			id : true
		});
		alertUI({
			title : '获取所有控件值',
			html : '<pre>'+$.debug(str)+'</pre>',
			btns : [{
				text : ' 确定 ',
				click : function(win){alertUI(win)}
			}]
		});
		return false;
	}
	</script>
	<br />


	<style>
	.dropbox{width:230px; height:auto; overflow:hidden; border:5px dashed #ccc; color:#999; margin-top:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
	.dropbox .drop{height:50px; line-height:50px; overflow:hidden; text-align:center; border-bottom:1px solid #ddd; cursor:default;}
	.dropbox .files{height:50px; overflow:hidden; text-align:center; border-top:1px solid #eee;
		background:-moz-linear-gradient(top, #f5f5f5 0%, #fff 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#fff)); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top, #f5f5f5 0%, #fff 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top, #f5f5f5 0%, #fff 100%); /* Opera11.10+ */
		background:-ms-linear-gradient(top, #f5f5f5 0%, #fff 100%); /* IE10+ */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#ffffff, gradientType=0); /* IE6-9 */
		background:linear-gradient(top, #f5f5f5 0%, #fff 100%); /* W3C */
	}
	.tips{
		position:absolute; z-index:9999; top:-9999px; left:-9999px; border:#767676 1px solid; color:#555;
		padding:0 5px; text-align:center; font-size:12px; overflow:hidden; width:auto; line-height:20px;
		filter:progid:DXImageTransform.Microsoft.shadow(color=#aaaaaa,direction=135,strength=2);
		-moz-box-shadow:1px 1px 4px #aaa; -webkit-box-shadow:1px 1px 4px #aaa; box-shadow:1px 1px 4px #aaa;
		-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
		background:-moz-linear-gradient(top, #fff 0%, #e5e5e5 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top, #fff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top, #fff 0%, #e5e5e5 100%); /* Opera11.10+ */
		background:-ms-linear-gradient(top, #fff 0%, #e5e5e5 100%); /* IE10+ */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e5e5e5, gradientType=0); /* IE6-9 */
		background:linear-gradient(top, #fff 0%, #e5e5e5 100%); /* W3C */
	}
	</style>
	<a id="html5area"></a>
	<h2>HTML5 拖拽上传 <span class="note">(可多选)</span></h2>
	<h3>支持HTML5的浏览器才有效, 否则file类型上传控件将自动使用 ajaxupload 脚本, 其他拖拽类型即无效</h3>
	<div class="content"><pre>
	$(expr).html5Upload({
		name : 'filename', //上传字段标示
		url : 'upload.php', //文件数据处理URL
		data : null, //附加参数
		dragover : null, //拖动到对象上时执行
		dragleave : null, //拖动到对象外面时执行
		load : null, //post操作成功时执行
		progress : null //数据正在被post的过程中周期性执行
	});</pre>
	<div class="dropbox" title="jQuery HTML5 Uploader">
		<div class="drop">drag and drop file(s) to here</div>
		<div class="files"><input type="file" id="multiple" multiple /></div>
	</div>
	HTML5图片压缩：<input type="file" id="compress" />
	<div class="compressDiv"></div>
	</div>
	<script>
	$('#multiple').filestyle({
		text : 'select file(s)',
		width : 230,
		height : 50
	});
	$('.dropbox, #multiple').html5Upload({
		name : 'filename',
		url : 'test.php'
	});
	$('.dropbox').tips();
	$('#compress').on('change', function(e){
		$.imgCompress(e, 300, function(data){
			$('.compressDiv').html('<img src="'+data+'" />');
		});
	});
	</script>
	<br />


	<style>
	.showmenu{width:100px; height:30px; line-height:27px; margin-right:20px; display:inline-block; background:#e5e5e5; border:1px solid #ccc; text-align:center; cursor:pointer; text-shadow:0 1px 0 #fff; font-size:14px; font-family:"Microsoft YaHei",Arial; overflow:visible; border-radius:2px;}
	.showmenu:hover, .showmenu2{background:#ddd;}
	.showlist{margin:10px 0;}
	.showcontent{width:auto; height:auto; overflow:hidden; float:left; border:1px solid #c3c3c3; background:#fff; box-shadow:0 7px 10px rgba(102,102,102,0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
	.showcontent .top, .showcontent .bottom{padding:15px; width:auto; height:auto; overflow:hidden;}
	.showcontent .top .info{margin-left:115px;}
	.showcontent .top .info .pic{float:left; width:90px; height:90px; overflow:hidden; margin-left:-115px; padding:4px; border:1px solid #c3c3c3; border-radius:3px;}
	.showcontent .top .info .pic img{width:90px; height:90px;}
	.showcontent .top .info h3{font-size:16px; height:28px; margin:0; padding:0;}
	.showcontent .top .info span{line-height:18px; display:block; width:270px; height:auto; overflow:hidden;}
	.showcontent .bottom{border-top:1px solid #ccc; background:#ededed; *width:405px;}
	.showcontent .bottom button{float:left; padding:0 10px; height:26px; line-height:20px; background:#006dcc; border:1px solid #005199; color:#fff; text-shadow:0 -1px 0 #005199; cursor:pointer; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
	.showcontent .bottom .logout{float:right; background:#da4f49; border:1px solid #a33b36; text-shadow:0 -1px 0 #a33b36;}
	</style>
	<a id="showmenuarea"></a>
	<h2>显示菜单</h2>
	<div class="content"><pre>
	$(expr).showmenu({
		html : '', //菜单显示的内容, string|对象
		cls : '', //菜单的样式
		effect : '', //显示|关闭效果, 'opacity'|'height'
		arrow : true, //显示箭头
		fixArrowCss : null, //一个参数[0:箭头在上面(菜单在下面)|1:箭头在下面(菜单在上面)], this代表箭头(eq(0):背面箭头,eq(1):表面箭头)
		hideEle : null, //绑定关闭菜单的对象, string|对象
		show : null, //显示后执行, this代表菜单
		hide : null //关闭后执行, this代表菜单
	});
	$(expr).showmenu(); //隐藏菜单
	
	延迟关闭菜单
	$(expr).delayhidden({
		list : '', //菜单, string|对象
		delay : 150, //延迟时间
		auto : true, //自动显示隐藏, 否则需使用 in|out 函数手动显示隐藏
		over : null, //鼠标移入后执行
		out : null //鼠标移出后执行
	});</pre>
	<div class="showmenu" id="showmenu">显示菜单</div>
	<div class="showmenu" id="showmenu-delay">延迟关闭</div>
	<div class="showcontent">
		<div class="top">
			<div class="info">
				<div class="pic"><img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211354401.gif" border="0" /></div>
				<h3>Geunevere Calista</h3>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
				<div class="clear"></div>
			</div>
		</div>
		<div class="bottom">
			<button class="logout">Logout</button>
			<button>Account</button>
			<div class="clear"></div>
		</div>
	</div>
	</div>
	<script>
	$('#showmenu').showmenu({
		html : $('.showcontent'),
		cls : 'showlist',
		effect : 'opacity',
		fixArrowCss : function(n){
			if(!n){
				this.eq(0).css({'border-color':'#aaa transparent'});
				this.eq(1).css({'border-color':'#fff transparent'});
			}else{
				this.eq(0).css({'border-color':'#aaa transparent'});
				this.eq(1).css({'border-color':'#ededed transparent'});
			}
		},
		//hideEle : '.showcontent .bottom button:eq(0)',
		show : function(){
			$('#showmenu').addClass('showmenu2');
		},
		hide : function(){
			$('#showmenu').removeClass('showmenu2');
		}
	});
	$('.showcontent .bottom button:eq(0)').click(function(){
		$('#showmenu').showmenu('hide');
	});
	$('#showmenu-delay').delayhidden({
		list : '.showlist',
		over : function(){
			this.addClass('showmenu2');
			var position = this.position();
			$('.showlist').css({left:position.left, top:position.top+this.outerHeight(false)});
		},
		out : function(){
			this.removeClass('showmenu2');
		}
	});
	</script>
	<br />


	<style>
	.interlace{border:1px solid #ddd; border-bottom:none; text-align:left;}
	.interlace div{border-bottom:1px solid #ddd; line-height:30px; background:#ededed; padding:0 10px;}
	.interlace .odd{background:#e0e8f5;}
	.interlace .hover{background:#bfd1ee;}
	.interlace .click{background:#8cb0eb;}
	</style>
	<a id="interlacearea"></a>
	<h2>鼠标经过且隔行变色</h2>
	<div class="content"><pre>
	$(expr).interlace({
		el : 'tr', //变色对象
		even : 'even', //双数行样式名
		odd : 'odd', //单数行样式名
		hover : '', //鼠标经过样式名, 变色对象增加skip自定义属性后以下参数无效
		click : '', //鼠标点击样式名
		one : null, //第一次点击执行
		two : null //第二次点击执行
	});</pre>
	<div class="interlace">
		<div>变色对象</div>
		<div>变色对象</div>
		<div>变色对象</div>
		<div skip="skip">变色对象</div>
		<div>变色对象</div>
		<div>变色对象</div>
	</div>
	</div>
	<script>
	$('.interlace').interlace({
		el : 'div',
		hover : 'hover',
		click : 'click'
	});
	</script>
	<br />


	<style>
	.overlay, .overlay-target, .overlay-target2{display:inline-block; width:270px; height:129px; background:#fff url(http://www.baidu.com/img/bd_logo1.png) no-repeat center center; background-size:100% 100%;}
	.overlay-target, .overlay-target2{display:none; width:540px; height:258px; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.3);}
	.overlay-target a{margin:10px 0 0 10px; font-size:14px;}
	.overlay-target2{width:100%; background-size:auto 100%; border-radius:0; box-shadow:none;}
	</style>
	<a id="overlayarea"></a>
	<h2>遮罩层与展示层</h2>
	<div class="content"><pre>
	$.overlay(target, type);
	target: false(删除), expr|对象|html代码(内容), type: 浮动控件位置类型(0:居中|1:底部)</pre>
	<div class="overlay" id="overlay"></div>
	<div class="overlay" id="overlay2"></div>
	<div class="overlay-target"><a href="javascript:void(0)">关闭</a></div>
	<div class="overlay-target2"></div>
	</div>
	<script>
	$('#overlay').click(function(){ $.overlay('.overlay-target') });
	$('#overlay2').click(function(){ $.overlay('.overlay-target2',1) });
	$('.overlay-target a').click(function(){ $.overlay(false) });
	</script>
	<br />


	<style>
	.lightbox{margin-bottom:10px; height:100px;}
	.lightbox div, .lightbox a{display:block; float:left; margin-right:10px; width:100px; height:100px; overflow:hidden; cursor:pointer;}
	.lightbox img{width:100%;}
	</style>
	<a id="lightboxarea"></a>
	<h2>图片展示</h2>
	<div class="content"><pre>
	$(expr).lightbox({
		auto : 0, //自动播放
		nobg : false, //没有背景
		bgopacity : 0.6, //背景透明度
		bgclose : true, //点击背景关闭
		animatebg : false, //动画显示背景
		zoom : true, //自动缩放(适配窗口)
		margin : 30, //距离窗口边缘(自动缩放有效)
		after : null //显示后执行
	});</pre>
	<div class="lightbox">
		<a href="http://www.iyi8.com/uploadfile/2015/0202/20150202120312728.jpg" title="性感美女合集01"><img src="http://www.iyi8.com/uploadfile/2015/0202/20150202120312728.jpg" /></a>
		<a href="http://www.iyi8.com/uploadfile/2015/0202/20150202120314612.jpg"><img src="http://www.iyi8.com/uploadfile/2015/0202/20150202120314612.jpg" /></a>
		<a href="http://www.iyi8.com/uploadfile/2015/0202/20150202120316329.jpg"><img src="http://www.iyi8.com/uploadfile/2015/0202/20150202120316329.jpg" /></a>
		<a href="http://www.iyi8.com/uploadfile/2015/0202/20150202120316790.jpg" title="性感美女合集04"><img src="http://www.iyi8.com/uploadfile/2015/0202/20150202120316790.jpg" /></a>
		<a href="http://www.iyi8.com/uploadfile/2015/0202/20150202120319496.jpg" title="性感美女合集05"><img src="http://www.iyi8.com/uploadfile/2015/0202/20150202120319496.jpg" /></a>
	</div>
	<div class="lightbox"><div><img src="http://img.7160.com/uploads/allimg/150422/9-150422141124.jpg" title="清纯少女" /></div></div>
	</div>
	<script>
	$('.lightbox:eq(0) a').lightbox({auto:2000});
	$('.lightbox div img').lightbox();
	</script>
	<br />


	<a id="alertuiarea"></a>
	<h2>提示窗</h2>
	<div class="content"><pre>
	alertUI({
		win : 'self', //显示窗口['self'|'parent'|'top']
		cls : '', //自定义窗口样式
		title : '', //标题
		width : 0, //总宽度
		height : 'auto', //总高度
		drag : false, //允许拖动, 需引入jdrag插件
		fixd : false, //随页面滚动(设置后不可拖动)
		auto : 0, //自动关闭, 单位毫秒
		nox : false, //不显示右上角的关闭按钮
		nobg : false, //不显示遮罩层
		html : '要执行该操作请先&lt;a href="/login/">登录&lt;/a>', //显示内容, string|url|对象, 默认为空
		btns : [{ //按钮组, 不设置即不显示按钮
			text : ' 确定 ',
			click : function(){alert('按了确定');alertUI()}
		},{
			text : ' 取消 ',
			click : function(){alertUI()}
		}],
		clickbg : null, //点击背景执行
		before : null, //显示提示窗前执行
		after : null, //显示提示窗后执行
		close : null //关闭提示窗后执行
	});
	直接调用alertUI()关闭提示窗 ([undefined|'self'|'parent'|'top'])</pre>
	<input type="button" value=" Default " onclick="alerts(0)" class="bbtn" />
	<input type="button" value=" Maxthon " onclick="alerts(1)" class="bbtn" />
	<input type="button" value=" Maxthon4 " onclick="alerts(2)" class="bbtn" />
	<input type="button" value=" iOS7-Alert " onclick="alerts(3)" class="bbtn" /><br /><br />
	$(expr).alertURL(options); //可使用 alertUI 的 options 参数<br />
	<a class="alertURL" href="http://localhost/default.php?width=500&height=300" target="_blank">提示窗链接</a> (使用提示窗显示AJAX获取到的html)
	</div>
	<script>
	function alerts(f){
		var cls = '', clickbg = null;
		if(f==1){
			cls = 'maxthon';
			clickbg = function(){
				var maxthon = $('.maxthon').css('border-color','#bababa');
				setTimeout(function(){
					maxthon.css('border-color','');
					setTimeout(function(){
						maxthon.css('border-color','#bababa');
						setTimeout(function(){
							maxthon.css('border-color','');
						}, 150);
					}, 150);
				}, 150);
			};
		}else if(f==2){
			cls = 'maxthon4';
		}else if(f==3){
			cls = 'ios7-alert';
		}
		alertUI({
			title : '登录',
			cls : cls,
			clickbg : clickbg,
			drag : true,
			html : '<p>要执行该操作请先<a href="/login.asp">登录</a></p>',
			btns : [{
				text : ' 确定 ',
				click : function(){alertUI();alerts(f)}
			},{
				text : ' 取消 ',
				click : function(){alertUI()}
			}]
		});
	}
	$('.alertURL').alertURL();
	</script>
	<br />


	<style>
	.slide{margin-top:10px; border:1px solid #ccc; height:100px; overflow:hidden; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
	.slide li{line-height:20px; padding:10px; background-color:#eee;}
	.slide li.even{background-color:#ddd;}
	.slide li i{font-family:"Century Gothic"; font-size:28px; font-weight:bold; margin-right:10px;}
	.slide .title{height:30px; line-height:30px; color:#fff; padding:0 10px; font-size:12px; background:#000; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px;}
	.slide .progress{height:3px; background:#e60000; bottom:0; filter:alpha(opacity=50); opacity:0.5;}
	.slidecontroller{clear:both; margin-top:10px; height:13px;}
	.slidecontroller .pager{float:left; display:inline; height:8px;}
	.slidecontroller .prev, .slidecontroller .next, .slidecontroller .pager a, .slidecontroller .pager a:hover{text-align:center; font-size:0; display:inline; margin:0 2px; float:left; width:28px; height:6px; overflow:hidden; text-decoration:none; border:1px solid rgba(254,188,30,0.3); *border:1px solid #FEBC1E; -webkit-transition:all 0.2s linear; transition:all 0.2s linear;}
	.slidecontroller .pager a:hover, .slidecontroller .pager a.cur{border:1px solid #FEBC1E;}
	.slidecontroller .pager a.this{background:#FEBC1E;}
	.slidecontroller .pager a span{position:absolute; z-index:1; display:block; top:0; left:0; width:0; height:6px; overflow:hidden; background:#FCCE62;}
	.slidecontroller .prev, .slidecontroller .next{background-color:#4BA0F3; border:1px solid #4BA0F3;}
	.slidecontroller .prev{-moz-border-radius-topleft:4px; -moz-border-radius-bottomleft:4px; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; border-top-left-radius:4px; border-bottom-left-radius:4px;}
	.slidecontroller .next{-moz-border-radius-topright:4px; -moz-border-radius-bottomright:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:4px;}
	.slidecontroller .prev:hover, .slidecontroller .next:hover{background-color:#36F; border:1px solid #36F;}
	.moveimg{opacity:0; -webkit-transform:translateX(100px); transform:translateX(100px);}
	.moveimg2{opacity:1; -webkit-transform:translateX(0); -webkit-transition:all 1s ease; transform:translateX(0); transition:all 1s ease;}
@media only screen and (min-width:601px) {
	.slidearea{width:800px; margin:0;}
	.slide{width:800px;}
	.slidecontroller{width:800px;}
}
	</style>
	<a id="touchmovearea"></a>
	<h2>分页滚动 <span class="note">(支持触屏移动设备)</span></h2>
	<div class="content"><pre>
	$(expr).touchmove({
		list : null, //滚动列表, 为null时自动获取li标签
		type : 0, //切换效果, 0:滚动切换, 1:渐显切换
		index : 0, //默认显示
		dir : 0, //拖拽(滚动)方向, 水平[0|x|left], 垂直[1|y|top]
		visible : 1, //显示个数, [visible&lt;scroll ? scroll : visible]
		scroll : 1, //滚动个数
		mouseWheel : false, //使用鼠标滚轮
		autoWH : true, //自动设置宽高, 为了一页只显示一个列表元素
		autoW : true, //自动设置宽, autoWH为true时无效
		autoH : true, //自动设置高, autoWH为true时无效
		title : '', //显示list的title为标题的标题类名, 留空即不显示
		opacity : 0.7, //标题容器透明度
		titleAnimate : 'move', //标题容器显示动画, [move|opacity]
		hide : true, //标题是否隐藏(产生动画显示,否则一直显示)
		keydown : false, //箭头键控制滚动分页列表, [上:第一页|下:最后一页|左:上一页|右:下一页]
		prev : '', //滚动到上一个分页列表的expr按钮
		next : '', //滚动到下一个分页列表的expr按钮
		disprev : '', //已经没有上一分页即增加这个样式, unlimit:false 时有效
		disnext : '', //已经没有下一分页即增加这个样式, unlimit:false 时有效
		pager : '', //存放分页按钮的容器的expr, 留空即不显示
		curpager : 'this', //当前分页按钮类名
		pagerText : [], //按钮文字,为空即使用数字,若使用,元素数量必须与list数量相同
		autoPagerWH : true, //按钮容器自动宽高
		autoPager : true, //只有一个列表时自动隐藏按钮容器
		offset : '', //按钮容器位置, [left|center|right]
		offsetW : 10, //按钮容器距离左右边
		offsetH : 10, //按钮容器距离上下边
		section : true, //分页滚动
		act : 'click', //分页按钮的操作方式
		easing : 'easeout', //切换效果, 可使用 $.easing 扩展
		speed : 500, //切换速度
		auto : 0, //自动切换速度(0:不自动切换), auto==speed无限滚动
		autoWait : 0, //自动滚动前停留
		progress : '', //自动切换时在容器下面显示时间动画的样式, 为空即不显示
		progressPager : false, //自动切换时分页按钮显示时间动画
		unlimit : false, //无限滚动
		hoverStop : true, //自动切换时鼠标移到停止滚动
		drag : false, //可否拖拽
		bounces : true, //回弹效果
		stopBounces : false, //终止屏幕拖动, 使用后页面不能上下拖动
		pagerAction : null, //分页按钮操作时执行
		beforeForLast : null, //滚动前执行, this:前一次的li对象
		before : null, //滚动前执行
		move : null, //滚动时执行
		afterLeft : null, //向左滚动后执行
		afterRight : null, //向右滚动后执行
		after : null, //滚动停止后执行
		complete : null //脚本执行完成后执行
	});</pre>
	<div class="slidearea">
		<div class="slide">
			<ul>
				<li title="标题1">
					<p>　　<i>1</i>利比亚首都的黎波里的多处目标21日晚遭到西方国家战机的空中打击。这是自19日西方国家对利比亚发动军事打击以来，战机连续第三次空袭的黎波里目标。</p>
					<p>　　目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首先遭到袭击，此处军营位于广播电视大楼附近。随后，离海军军营大约两公里处的沙阿卜港附近的一条输油管道在空袭中发生爆炸，目击者看到爆炸后引起的大火。</p>
				</li>
				<li title="标题2" class="even">
					<p>　　<i>2</i>利比亚首都的黎波里的多处目标21日晚遭到西方国家战机的空中打击。这是自19日西方国家对利比亚发动军事打击以来，战机连续第三次空袭的黎波里目标。<a href="http://www.baidu.com" target="_blank">百度</a></p>
					<p>　　目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首先遭到袭击，此处军营位于广播电视大楼附近。随后，离海军军营大约两公里处的沙阿卜港附近的一条输油管道在空袭中发生爆炸，目击者看到爆炸后引起的大火。</p>
				</li>
				<li title="标题3">
					<p>　　<img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211435147.jpg" width="25" height="25" align="absmiddle" class="moveimg" /> 利比亚首都的黎波里的多处目标21日晚遭到西方国家战机的空中打击。这是自19日西方国家对利比亚发动军事打击以来，战机连续第三次空袭的黎波里目标。</p>
					<p>　　目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首先遭到袭击，此处军营位于广播电视大楼附近。随后，离海军军营大约两公里处的沙阿卜港附近的一条输油管道在空袭中发生爆炸，目击者看到爆炸后引起的大火。</p>
				</li>
				<li title="标题4" class="even">
					<p>　　<i>4</i>利比亚首都的黎波里的多处目标21日晚遭到西方国家战机的空中打击。这是自19日西方国家对利比亚发动军事打击以来，战机连续第三次空袭的黎波里目标。</p>
					<p>　　目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首先遭到袭击，此处军营位于广播电视大楼附近。随后，离海军军营大约两公里处的沙阿卜港附近的一条输油管道在空袭中发生爆炸，目击者看到爆炸后引起的大火。</p>
				</li>
				<li title="标题5">
					<p>　　<i>5</i>利比亚首都的黎波里的多处目标21日晚遭到西方国家战机的空中打击。这是自19日西方国家对利比亚发动军事打击以来，战机连续第三次空袭的黎波里目标。</p>
					<p>　　目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首先遭到袭击，此处军营位于广播电视大楼附近。随后，离海军军营大约两公里处的沙阿卜港附近的一条输油管道在空袭中发生爆炸，目击者看到爆炸后引起的大火。</p>
				</li>
			</ul>
		</div>
		<div class="slidecontroller"><a href="javascript:void(0)" class="prev">&lt;</a><div class="pager"></div><a href="javascript:void(0)" class="next">&gt;</a></div>
	</div>
	</div>
	<script>
	$('.slide').touchmove({
		drag : true,
		keydown : true,
		prev : '.slidecontroller .prev',
		next : '.slidecontroller .next',
		pager : '.slidecontroller .pager',
		beforeForLast : function(index){
			switch(index){
				case 2:
					this.find('img').removeClass('moveimg2');
					break;
			}
		},
		afterLeft : function(index){
			switch(index){
				case 2:
					this.find('img').addClass('moveimg2');
					break;
			}
		},
		afterRight : function(index){
			switch(index){
				case 2:
					this.find('img').addClass('moveimg2');
					break;
			}
		}
	});
	</script>
	<br />


	<style>
	.pCon{height:568px; overflow:hidden; border:1px solid #e5e5e5; border-radius:5px; box-sizing:border-box;}
@media only screen and (min-width:601px) {
	.pCon{width:320px;}
}
	.pHeader, .pFooter{height:44px; line-height:44px; text-align:center; font-size:16px; color:#fff; text-shadow:0 -1px 0 #333;}
	.pHeader{background:-moz-linear-gradient(top, #e9539d 0%, #7c0a2f 100%);
	background:-webkit-linear-gradient(top, #e9539d 0%, #7c0a2f 100%);
	background:-o-linear-gradient(top, #e9539d 0%, #7c0a2f 100%);
	background:-ms-linear-gradient(top, #e9539d 0%, #7c0a2f 100%);}
	.pFooter{background:-moz-linear-gradient(top, #aaa 0%, #444 100%);
	background:-webkit-linear-gradient(top, #aaa 0%, #444 100%);
	background:-o-linear-gradient(top, #aaa 0%, #444 100%);
	background:-ms-linear-gradient(top, #aaa 0%, #444 100%);}
	.pArea{height:calc(100% - 44px*2); height:-webkit-calc(100% - 44px*2); overflow:hidden;}
	.pArea li{position:relative; height:44px; line-height:44px; padding:0 10px;}
	.pArea li:after{content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#e5e5e5; transform-origin:50% 100%; -webkit-transform-origin:50% 100%; transform:scaleY(0.5); -webkit-transform:scaleY(0.5);}
	.pArea li a{display:block; height:100%; line-height:44px; text-decoration:none; color:#333; text-align:left;}
	.pArea li a span{float:right; font-size:12px; color:#999;}
	
	.pullRefresh{position:relative; z-index:2; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling:touch;}
	.pullRefresh .pullWrap{position:relative; box-sizing:border-box; transform:translateY(0); -webkit-transform:translateY(0); transition:transform 300ms ease-out,padding 300ms ease-out; -webkit-transition:-webkit-transform 300ms ease-out,padding 300ms ease-out;}
	.pullRefresh .pullHeader, .pullRefresh .pullFooter{position:relative; z-index:1; left:0; width:100%; height:64px; overflow:hidden;}
	.pullRefresh .pullHeader{margin-top:-64px;}
	.pullRefresh .pullFooter{position:fixed; transform:translateY(0); -webkit-transform:translateY(0); transition:transform 200ms ease-out; -webkit-transition:-webkit-transform 200ms ease-out;}
	.pullRefresh .pullScrollFooter{position:relative;}
	.pullRefresh .pullHeader div, .pullRefresh .pullFooter div{position:absolute; left:50%; top:14px; margin-left:-101px; width:202px; height:36px;}
	.pullRefresh .pullHeader div i, .pullRefresh .pullFooter div i{display:block; float:left; margin-top:7px; width:22px; height:22px; transform:rotate(0deg); -webkit-transform:rotate(0deg); transition:transform 200ms ease-out; -webkit-transition:-webkit-transform 200ms ease-out; background:url("") no-repeat center center; background-size:100% 100%;}
	.pullRefresh .pullHeader div i.h, .pullRefresh .pullFooter div i.h{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
	.pullRefresh .pullFooter div i{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
	.pullRefresh .pullFooter div i.h{transform:rotate(360deg); -webkit-transform:rotate(360deg);}
	.pullRefresh .pullHeader div i.x, .pullRefresh .pullFooter div i.x{display:none; transform:rotate(0deg); -webkit-transform:rotate(0deg); animation:pullrefresh-spin 1s steps(12, end) infinite; -webkit-animation:pullrefresh-spin 1s steps(12, end) infinite; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
	@-webkit-keyframes pullrefresh-spin{100%{-webkit-transform:rotate(360deg);}}
	@keyframes pullrefresh-spin{100%{transform:rotate(360deg);}}
	.pullRefresh .pullHeader div span, .pullRefresh .pullFooter div span{display:block; float:left; width:180px; height:36px; overflow:hidden; text-align:center;}
	.pullRefresh .pullHeader div span font, .pullRefresh .pullFooter div span font{display:block; width:auto; height:22px; line-height:22px; overflow:hidden; font-size:14px; color:#777;}
	.pullRefresh .pullHeader div span strong, .pullRefresh .pullFooter div span strong{display:block; width:auto; height:14px; line-height:14px; overflow:hidden; font-size:12px; font-weight:normal; color:#ccc; transform:scale(0.84); -webkit-transform:scale(0.84);}
	.pullRefresh .pullFooter > span{display:none; width:100%; height:64px; line-height:64px; text-align:center; font-size:12px; color:#ddd;}
	</style>
	<a id="pullrefresharea"></a>
	<h2>下拉刷新 <span class="note">(支持触屏移动设备,仅支持CSS3)</span></h2>
	<div class="content"><pre>
	$(expr).pullRefresh({
		header : false, //使用顶部, 如果使用html,即自定义
		footer : false, //使用底部
		dragFooter : false, //使用拖曳底部, 如果使用html,即自定义
		headerText : '下拉可以刷新', //顶部默认文字
		footerText : '上拉加载更多', //底部默认文字
		headerTipText : '松开立即刷新', //顶部下拉时的提示文字
		footerTipText : '松开加载更多', //底部上拉时的提示文字
		headerUpdatingText : '正在刷新中...', //顶部加载中的文字
		footerUpdatingText : '正在加载中...', //底部加载中的文字
		headerUpdateTime : '最后更新 %t', //顶部更新时间, %t将替换为当前时间
		footerUpdateTime : '最后加载 %t', //底部更新时间, %t将替换为当前时间
		headerView : '', //头部控件, html代码
		footerNoMoreText : '', //底部加载后滚动条高度没有变化时显示, 为空即不显示
		useTransform : !$.browser.android, //使用transform移动
		scroll : null, //滚动时执行, 接受两个参数:headerView, headerViewHolder
		start : null, //准备拖动时执行
		move : null, //拖动时执行, 接受一个参数:当前拖曳距离
		release : null, //松开时执行
		complete : null, //脚本执行完成后执行
		restore : null, //恢复正常状态时执行
		refresh : null, //下拉执行, 附带一个参数(该参数是一个函数,且执行完后需执行这个函数来关闭显示区域)
		load : null //上拉执行, 附带一个参数(同上)
	});</pre>
	<div class="pCon">
		<div class="pHeader">Pull Refresh <span></span></div>
		<div class="pArea"><div class="pullRefresh"><ul></ul></div></div>
		<div class="pFooter">Footer Tabber</div>
	</div>
	</div>
	<script>
	var k = 0, kTime = null;
	function refresh(){
		var i, pullRefresh = $('.pullRefresh'), html = '',
		now = new Date(), nowText = now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
		for(i=1; i<=80; i++){
			html += '<li><a href="http://www.baidu.com" target="_blank"><span>'+nowText+'</span>Items '+i+'</a></li>';
			k = i;
		}
		pullRefresh.find('ul').html(html);
		pullRefresh.find('ul li:eq(2) a').click(function(){
			$('.pullRefresh').pullRefresh('headerBegin');
			return false;
		});
		pullRefresh.find('ul li:eq(3) a').click(function(){
			$('.pullRefresh').pullRefresh('headerEnd');
			clearTimeout(kTime); kTime = null;
			return false;
		});
		pullRefresh.find('ul li:eq('+(pullRefresh.find('ul li').length-3)+') a').click(function(){
			$('.pullRefresh').pullRefresh('footerBegin');
			return false;
		});
		pullRefresh.find('ul li:eq('+(pullRefresh.find('ul li').length-4)+') a').click(function(){
			$('.pullRefresh').pullRefresh('footerEnd');
			clearTimeout(kTime); kTime = null;
			return false;
		});
	}
	function load(){
		var i, j, pullRefresh = $('.pullRefresh'), html = '',
		now = new Date(), nowText = now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
		for(i=k+1; i<=k+20; i++){
			html += '<li><a href="http://www.baidu.com" target="_blank"><span>'+nowText+'</span>Items '+i+'</a></li>';
			j = i;
		}
		pullRefresh.find('ul').append(html);
		pullRefresh.find('ul li:eq('+(pullRefresh.find('ul li').length-3)+') a').click(function(){
			$('.pullRefresh').pullRefresh('footerBegin');
			return false;
		});
		pullRefresh.find('ul li:eq('+(pullRefresh.find('ul li').length-4)+') a').click(function(){
			$('.pullRefresh').pullRefresh('footerEnd');
			clearTimeout(kTime); kTime = null;
			return false;
		});
		k = j;
	}
	$(function(){
		refresh();
		$('.pullRefresh').pullRefresh({
			header : true,
			footer : true,
			refresh : function(fn){
				kTime = setTimeout(function(){
					clearTimeout(kTime); kTime = null;
					refresh();
					fn();
				}, 3000);
			},
			load : function(fn){
				kTime = setTimeout(function(){
					clearTimeout(kTime); kTime = null;
					load();
					fn();
				}, 3000);
			}
		});
	});
	</script>
	<br />


	<style>
	.showtitle{width:516px; height:198px;}
	.showtitle li{width:248px; height:89px; margin:0 10px 10px 0; display:inline; float:left;}
	.showtitle li .title{height:30px; line-height:30px; color:#fff; padding:0 10px; font-size:12px; background:#000; margin:0;}
	</style>
	<a id="showtitlearea"></a>
	<h2>动画显示标题</h2>
	<div class="content"><pre>
	$(expr).showtitle({
		title : '', //标题容器类名
		opacity : 0.7, //标题容器透明度
		titleAnimate : 'move', //标题容器显示动画, [move|opacity]
		hide : true, //标题是否隐藏(产生动画显示,否则一直显示)
		speed : 200, //标题出现速度
		complete : null //生成后执行
	});</pre>
	<ul class="showtitle">
		<li><img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211522665.jpg" title="动画显示标题1" /></li>
		<li><img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211522665.jpg" title="动画显示标题2" /></li>
		<li><img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211522665.jpg" title="动画显示标题3" /></li>
		<li><img src="http://miaomiaostudy.b0.upaiyun.com/mmx/2015/03/10/20150310211522665.jpg" title="动画显示标题4" /></li>
	</ul>
	</div>
	<script>
	$('.showtitle img').showtitle({
		title : 'title',
		opacity : 0.7,
		titleAnimate : 'move',
		hide : true,
		speed : 200
	});
	</script>
	<br />


	<style>
	.dragshow{height:auto; overflow:hidden; position:relative; border:1px solid #ccc; -webkit-border-radius:4px; border-radius:4px;}
	.dragshow li{position:relative; z-index:666; width:100%; height:auto; overflow:hidden; box-sizing:border-box; border-bottom:1px solid #ccc; padding:0 10px; background:#fff; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:-webkit-transform 200ms ease-out; transition:transform 200ms ease-out;}
	.dragshow li a{width:auto; height:auto; overflow:hidden; display:block; text-decoration:none;}
	.dragshow li a:hover{text-decoration:none;}
	.dragshow li strong{display:block; width:auto; height:25px; line-height:25px; overflow:hidden; font-size:14px; color:#333; white-space:nowrap; text-overflow:ellipsis;}
	.dragshow li span{display:block; width:auto; height:25px; line-height:25px; overflow:hidden; font-size:12px; color:#999;}
	.dragshow .title{position:absolute; z-index:1; top:0; right:0; width:60px; height:50px; overflow:hidden; color:#fff; text-align:center; font-size:12px; background:#f00; cursor:pointer;}
@media only screen and (min-width:601px) {
	.dragshow{width:400px;}
}
	</style>
	<a id="dragshowarea"></a>
	<h2>拖动显示</h2>
	<div class="content"><pre>
	$(expr).dragshow({
		list : 'li', //拖动列表
		title : '删除', //显示区域内的内容(支持html代码)(支持函数,接受一个参数:当前行)
		cls : 'title', //显示区域的类名称
		useTransform : true, //使用CSS3特性来移动, list的css样式需要增加transform:translateX(0);transition-duration:200ms;
		click : null, //点击显示区域时执行, this:显示区域, 接受两个参数:当前行,显示区域点击的位置(为区别显示区域内有多个html标签)
		before : null //拖动前执行
	});</pre>
	<ul class="dragshow">
		<li mid="1"><a href="http://www.baidu.com" target="_blank"><strong>1.目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首</strong><span>添加时间：2014-03-23</span></a></li>
		<li mid="2"><a href="http://www.baidu.com" target="_blank"><strong>2.目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首</strong><span>添加时间：2014-03-23</span></a></li>
		<li mid="3"><a href="http://www.baidu.com" target="_blank"><strong>3.目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首</strong><span>添加时间：2014-03-23</span></a></li>
		<li mid="4"><a href="http://www.baidu.com" target="_blank"><strong>4.目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首</strong><span>添加时间：2014-03-23</span></a></li>
		<li mid="5"><a href="http://www.baidu.com" target="_blank"><strong>5.目击者告诉新华社记者，的黎波里市东部靠近海边的一处海军基地首</strong><span>添加时间：2014-03-23</span></a></li>
	</ul>
	</div>
	<script>
	$('.dragshow').dragshow({
		list : 'li',
		title : '删除',
		cls : 'title',
		click : function(row){
			var delBtn = this;
			//$.get('delete.php', {id:row.attr('mid')}, function(){
				delBtn.slideUp(200);
				row.css('min-height', 'inherit').slideUp(200, function(){
					var parent = row.parent(), tagName = row[0].tagName;
					row.remove();
					if(!parent.find(tagName).length)delBtn.remove();
				});
			//});
		}
	});
	</script>
	<br />


	<style>
	.inertiaarea{height:300px; overflow:hidden; border:1px solid #ccc; background:#f5f5f5;}
	.inertiaarea ul{width:1200px; height:auto; overflow:hidden; -webkit-transition:-webkit-transform 200ms ease-out; transition:transform 200ms ease-out;}
	.inertiaarea ul li{float:left; width:100px; height:100px; line-height:100px; overflow:hidden; background:#fff; text-align:center;}
@media only screen and (min-width:601px) {
	.inertiaarea{width:500px;}
}
	</style>
	<a id="inertiaarea"></a>
	<h2>惯性拖拽</h2>
	<div class="content"><pre>
	$(expr).inertia({
		lockX : false, //锁定水平位置
		lockY : false, //锁定垂直位置
		fixed : null, //摩擦与缓动的前后固定的位置(例如selectpicker),如果设置必须返回{start:数值, end:数值}
		start : null, //滚动前执行
		move : null, //滚动时执行
		end : null, //滚动停止后执行
		complete : null //脚本执行完成后执行
	});</pre>
	<div class="inertiaarea">
		<ul></ul>
	</div>
	</div>
	<script>
	var html = '';
	for(var i=0; i<120; i++)html += '<li><a href="http://www.baidu.com" target="_blank">百度</a></li>';
	$('.inertiaarea ul').html(html+'<div class="clear"></div>');
	$('.inertiaarea ul').inertia({
		lockX:true,
		end : function(x, y){
			if(x>0)x = 0;
			if(x<this.parent().width()-this.width())x = this.parent().width()-this.width();
			if(y>0)y = 0;
			if(y<this.parent().height()-this.height())y = this.parent().height()-this.height();
			this.css({
				transform:'translate3d('+x+'px,'+y+'px,0)',
				'-webkit-transform':'translate3d('+x+'px,'+y+'px,0)',
				'transition-duration':'300ms', '-webkit-transition-duration':'300ms'
			});
		}
	});
	</script>
	<br />


	<style>
	.baidumap{height:500px; border:1px solid #ccc; background:#f5f5f5;}
@media only screen and (min-width:601px) {
	.baidumap{width:600px;}
}
	</style>
	<a id="inertiabaidumap"></a>
	<h2>百度地图</h2>
	<div class="content"><pre>
	$(expr).baiduMap({
		longitude : '', //经度, 113.440685
		latitude : '', //纬度, 23.136588
		level : 16, //默认地图级别
		lngObj : '', //存放经度数值的控件expr, 一般为输出用
		latObj : '', //存放纬度数值的控件expr
		centerCity : '广州', //默认显示城市, options.longitude,options.latitude两个值为空才有效
		getCoordinate : null, //点击地图获取坐标且返回经度与纬度, function
		isNav : false, //使用导航功能
		autoNav : true, //自动使用地点导航, 以当前位置导航到 (options.longitude, options.latitude)
		navType : -1 //非自动导航时的驾车策略, 0:最少时间, 1:最短距离, 2:避开高速
	});</pre>
	<div class="baidumap"></div>
	经度：<input type="text" id="longitude" />　纬度：<input type="text" id="latitude" />
	</div>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bwaWdfBatpKYvBGxOdne78Ij"></script>
	<script>
	$('.baidumap').baiduMap({
		isNav : true,
		autoNav : false,
		getCoordinate : function(x, y){alert('经度：'+x+'\n纬度：'+y)}
	});
	</script>

</div>

<a class="fixed" href="javascript:void(0)" onclick="return $.scrollto('#headertop')">返回顶部</a>
<script>
$(function(){
	$('.fixed').fixed({
		dir : 'top', //保持方向
		stay : function(){return $('#main').offset().top}, //保持所在位置
		fixed : null, //固定飘浮后执行
		normal : null, //取消固定飘浮后执行
		scroll : null //滚动时执行
	});
});
</script>
</body>
</html>